H5 Canvas总结_前端开发者

好未来前端开发框架|前端开发app框架有哪些|前端开发 template模板

html 代码

<!DOCTYPE html>

<head>

<title>canvas_02</title>

<style>

body {

padding: 0;

margin: 0;

overflow: hidden;

}

</style>

</head>

<body>

window.onload = function () {

var canvas = document.querySelector(“canvas”);

ctx = canvas.getContext(“2d”);

var w, h;

w = canvas.width = window.innerWidth;

h = canvas.height = window.innerHeight;

//初始化

var clearColor = ‘rgba(0, 0, 0, 0.1)’;//绘制渐变阴影

wordColor = “#3f3”;//字体颜色

words = “0123456789qwertyuiopasdfghjklzxcvbnm,./;’\\[]QWERTYUIOP{}ASDFGHJHJKL:ZXCVBBNM<>?”;

wordArr = words.split(”);//将文字拆分成一个数组

font_size = 16;//字体大小

clu = w / font_size;//降落列数

drops = [];

//设置初始值

for (var i = 0; i < clu; i++) {

drops[i] = 1;

console.log(“1—” + i);

}

function draw() {

ctx.save();

ctx.fillStyle = wordColor;

ctx.font = font_size + “px arial”;

//core

for (var i = 0; i < drops.length; i++) {

var text = wordArr[Math.floor(Math.random() * wordArr.length)];//取出来随机Text

ctx.fillText(text, i * font_size, drops[i] * font_size);//计算坐标

font_size: 字占距

i*font_size: 数值计算出来后作为X轴坐标。

drops[i]*font_size: 数值计算出来后作为Y轴坐标。

当每一列中绘制的文字超过浏览器的高度时，则从0开始重新绘制，当随机数大于0.99的时候就重新绘制。

if (drops[i] * font_size > h && Math.random() > 0.99) {

//如果绘满一屏或随机数大于0.99则列数改为0。0.99数值可更改

drops[i] = 0;

}

drops[i]++;

}

ctx.restore();

}

//动画循环

(function drawFrame() {

window.requestAnimationFrame(drawFrame, canvas);

ctx.fillStyle = clearColor;

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

draw();

}())

//resize

function resize() {

w = canvas.width = window.innerWidth;

h = canvas.height = window.innerHeight;

}

canvas.addEventListener(“resize”, resize);

}

</script>

</body>

</html>

前端开发的表格模板|web前端开发浏览器|前端浏览器开发者工具

H5 Canvas总结

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发