HTML5——添加新元素新元素 Canvas SVG MathML 黑客帝国特效

为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 黑客帝国特效

最新文章

热门文章

巴特西

HTML5——添加新元素 新元素 Canvas SVG MathML 黑客帝国特效

最新文章

热门文章

HTML5——添加新元素新元素 Canvas SVG MathML 黑客帝国特效