前端H5 canvas黑客帝国特效

web前端开发技能
前端开发技能饼图
web前端开发技能树

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <meta name=”Author” content=”aoliann”>
    <title>un</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        canvas {
            display: block;
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id=’canvas’>
        你的浏览器不支持,请你更换浏览器
    </canvas>
    <script type=”text/javascript”>
        var can = document.getElementById(“canvas”);
        var cxt = can.getContext(‘2d’); //设置绘图环境
        var w = canvas.width = window.screen.width;
        var h = canvas.height = window.screen.height;
        var words = Array(256).join(‘1’).split(”);
        var text = ”;
        var x = 0;
        function draw() {
            cxt.fillStyle = ‘rgba(0,0,0,0.05)’;
            cxt.fillRect(0, 0, w, h);
            cxt.fillStyle = color();
            words.map(function (y, n) {
                text = String.fromCharCode(65 + Math.ceil(Math.random() * 57));
                x = n * 10;
                cxt.fillText(text, x, y);
                words[n] = y > (768 + Math.random() * 484) ? 0 : y + 10;
            });
        }
        setInterval(draw, 30);
        function color() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return “rgb(” + r + “,” + g + “,” + b + “)”
        }
    </script>
</body>
</html>
前端开发需掌握的技能
前端开发技能标签
前端开发所需技能
» 本文来自:前端开发者 » 《前端H5 canvas黑客帝国特效》
» 本文链接地址:https://www.rokub.com/6127.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!