html圆形雪花动画

Html

Css

* {
	margin:0;
	padding:0;
}
#mycanvas {
	background:black;
}

//获取mycanvas画布   
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
//画布宽度   
var wid = window.innerWidth;
//画布高度   
var hei = window.innerHeight;
can.width = wid;
can.height = hei;
//雪花数目   
var snow = 100;
//雪花坐标、半径   
var arr = []; //保存各圆坐标及半径   
for (var i = 0; i < snow; i++) {
    arr.push({
        x: Math.random() * wid,
        y: Math.random() * hei,
        r: Math.random() * 10 + 1
    })
}
//画雪花   
function DrawSnow() {
    ctx.clearRect(0, 0, wid, hei);
    ctx.fillStyle = "white";
    ctx.beginPath();
    for (var i = 0; i < snow; i++) {
        var p = arr[i];
        ctx.moveTo(p.x, p.y);
        ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);
    }
    ctx.fill();
    SnowFall();
    ctx.closePath();
}
//雪花飘落   
function SnowFall() {
    for (var i = 0; i < snow; i++) {
        var p = arr[i];
        p.y += Math.random() * 2 + 1;
        if (p.y > hei) {
            p.y = 0;
        }
        p.x += Math.random() * 2 + 1;
        if (p.x > wid) {
            p.x = 0;
        }
    }
}
setInterval(DrawSnow, 50);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

html圆形雪花动画



代码描述：canvas雪花动画代码

更新时间：2020-02-15 00:47:50

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

心のなか中でまつ待つ

相关代码

html圆形雪花动画

最新