前端H5 canvas黑客帝国特效

web前端开发技能

前端开发技能饼图

web前端开发技能树

html 代码

<!DOCTYPE html>

<html>

<head>

* {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

overflow: hidden;

}

canvas {

display: block;

background: #000;

}

</style>

</head>

<body>

你的浏览器不支持，请你更换浏览器

</canvas>

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

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发