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>

 

posted @ 2019-05-20 19:43  远征i  阅读(697)  评论(0)  编辑  收藏  举报