为HTML添加新元素

添加新元素   +   该元素定义样式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>为 HTML 添加新元素</title>

<script>

document.createElement("myHero")

</script>

<style>

myHero {

    display: block;

    background-color: #ddd;

    padding: 50px;

    font-size: 30px;

}

</style> 

</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

<myHero>我的第一个新元素</myHero>

</body>

</html>

HTML5的新元素

Canvas

创建一个画布

使用JavaScript绘制图形

canvas坐标

绘制线条

文字

渐变

1.线性渐变

2.径向/圆渐变

图像——把图像放到画布上

内联SVG

SVG 可伸缩矢量图形

使用XML格式定义图形

将 SVG 元素直接嵌入 HTML 页面：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

   <polygon points="100,10 40,180 190,60 10,60 160,180"

   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>

</svg>

MathML

显示数学公式

黑客帝国特效

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Hacker</title>

<meta name="Keywords" content="">

<meta name="Description" content="">

<style>

    body{

        margin: 0px;

        overflow: hidden;

    }

    </style>

</head>

<body>

<!----画布---->

<canvas id="canvas" width="500" height="500" style="background-color: #000;">

    </canvas>

<h1 align="center" style="background-color: #F10609;" index="2">89890809089</h1>

<script>

    //获取元素

    //document指向文档

    //getElement获取标签

    //ById 用ID命民

    var canvas = document.getElementById("canvas");

    //获取当前画布的权限

    var ctx = canvas .getContext("2d");

    /*

    获取当前画布大小和屏幕一样

    获取屏幕对象

    获取屏幕宽和高

    */

     var s = window.screen;

    var w = s.width;

    var h = s.height;

    //赋值给画布

    canvas.width = w;

    canvas.height = h;

    //动态话字体大小

    var fontsize = 24;

    var drops = [];

    var str = "1010101101000111010";

    //一行放多少字 win / 自宽  = 字数   半个字呢？取整

    var clos  =  Math.floor(w / fontsize);

    //每个字体坐标

    //创建个数组存入clos个 0    for()

    for (var i = 0; i < clos;i++)

        {

            drops.push(0);

        }

    function drawString(){

        //paint

        //给矩形区域填充颜色

        ctx.fillStyle = "rgba(0,0,0,0.05)";

        //画一个矩形区域

        ctx.fillRect(0,0,w,h);

    //大小    -- 粗细  大小

    ctx.font = "700 "+fontsize+"px 微软雅黑";

    //color

    ctx.fillStyle = "green";

    for (var i = 0;i < clos;i++)

    {

        //x轴

        var x = i*fontsize;

        //y轴

        var y = drops[i]*fontsize;

        ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);

        //多次执行，只需要判

        if (y > h && Math.random() > 0.99){

            drops[i] = 0;

        }

        drops[i]++;

        ////////之后要画一个遮罩层，矩形区域，实现渐变

    }    

    }

    //通过定时器多次执行

    setInterval(drawString,20);

    console.log(drops);

    </script>

</body>

</html>

HTML5——添加新元素 新元素 Canvas SVG MathML 黑客帝国特效的更多相关文章

  1. Canvas修行之黑客帝国代码雨

    既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...

  2. HTML5新增核心工具——canvas

    原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...

  3. Canvas & SVG

    Canvas & SVG https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-dev ...

  4. HTML5 学习03——内联 SVG

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...

  5. 在HTML5中怎样实现Canvas阴影效果

    该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢! 今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML ...

  6. HTML5 的绘图支持- canvas

    Canvas HTML5新增了一个canvas元素,它是一张空画布,开发者需要通过JavaScript脚本进行绘制. 在canvas上绘图,经过如下3步 (1) 获取canvas元素对应的DOM对象. ...

  7. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  8. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  9. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

随机推荐

  1. Spring配置搭建——Spring学习 day1

    对象准备 1.导包 Spring core ,context ,beans ,expression ,aop Apache commons logging 2.写入一个对象 这边写入User对象 3. ...

  2. re模块和正则

    正则表达式:就是用来筛选字符串中特定内容的一串具有某种逻辑规则的字符组成.正则表达式不是Python独有的,而是一门独立的技术,它在所有的编程语言中都有使用,在Python中使用就必须依赖于re模块. ...

  3. 通过源码安装PostgresSQL

    通过源码安装PostgresSQL 1.1 下载源码包环境: Centos6.8 64位 yum -y install bison flex readline-devel zlib-devel yum ...

  4. 【NOIP2016提高A组集训第1场10.29】配对游戏

    题目 流行的跳棋游戏是在一个有mn个方格的长方形棋盘上玩的.棋盘起初全部被动物或障碍物占满了.在一个方格中,'X'表示一个障碍物,一个'0'-'9'的个位数字表示一个不同种类的动物,相同的个位数字表示 ...

  5. Python 变量类型Ⅲ

    Python 元组 元组是另一个数据类型,类似于 List(列表). 元组用 () 标识.内部元素用逗号隔开.但是元组不能二次赋值,相当于只读列表. 以上实例输出结果: 以下是元组无效的,因为元组是不 ...

  6. Winserver-禁止程序启动

    注册表限制程序启动 经测试,可以阻止手动启动,但在job中还是会有启动的进程,这个待确定. run→regedit 添加程序只写exe名就行 手动不能运行了

  7. CF1260F

    题目大意 一棵树,每个节点的权为L[i]~R[i],一棵树的贡献为\(\sum\limits_{h_{i} = h_{j}, 1 \le i < j \le n}{dis(i,j)}\),其中\ ...

  8. python-套接字编程之udp

    使用udp协议 服务端: #!/usr/bin/python3 # coding:utf-8 # Auther:AlphaPanda # Description:UDP服务端 # Version:1 ...

  9. idea万能快捷键，你不知道的17个实用技巧！！！

    IDEA里有一个万能快捷键(alt enter),功能非常强大,同一个快捷键,可以根据不同的语境提示你不同的操作,很多人可能还不了解这些功能,在处理代码的时候还手动处理,了解这些技巧之后,你编码也是一 ...

  10. Linux培训教程　浅谈：PHP在linux上执行外部命令(整理)

    一.PHP中调用外部命令介绍 二.关于安全问题 三.关于超时问题 四.关于PHP运行linux环境中命令出现的问题 一.PHP中调用外部命令介绍 在PHP中调用外部命令,可以用,1>调用专门函数 ...