雪花效果,html5 css3雪花水晶球动画场景特效"/>
html5+css3雪花效果,html5 css3雪花水晶球动画场景特效
html5 css3雪花水晶球动画场景特效,一个漂亮的基于canvas绘制卡通风格水晶球内部下雪动画特效。
查看演示
下载资源:
16
次 下载资源
下载积分:
10
积分
js代码
(function() {
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");
c1.height = 300;
c1.width = 300;
c2.height = 300;
c2.width = 300;
ctx1.fillStyle = "white";
ctx2.fillStyle = "white";
var c1Flakes = [];
var c2Flakes = [];
function Flake(r) {
this.x = Math.random() * 300;
this.y = Math.random() * 250;
this.r = r;
}
for (var i = 0; i <= 80; i++) {
var flake = new Flake(2);
c1Flakes.push(flake);
}
for (var i = 0; i <= 80; i++) {
var flake = new Flake(3);
c2Flakes.push(flake);
}
function render() {
ctx1.clearRect(0, 0, 300, 300);
ctx2.clearRect(0, 0, 300, 300);
for (var i = 0; i < c1Flakes.length; i++) {
ctx1.beginPath();
ctx1.arc(c1Flakes[i].x, c1Flakes[i].y, c1Flakes[i].r, 0, Math.PI * 2);
ctx1.fill();
if (c1Flakes[i].y <= 245){
c1Flakes[i].y+= .3;
}
else{
c1Flakes[i].y = 0;
}
}
for (var i = 0; i < c2Flakes.length; i++) {
ctx2.beginPath();
ctx2.arc(c2Flakes[i].x, c2Flakes[i].y, c2Flakes[i].r, 0, Math.PI * 2);
ctx2.fill();
if (c2Flakes[i].y <= 245){
c2Flakes[i].y += .6;
}
else{
c2Flakes[i].y = 0;
}
}
requestAnimationFrame(render);
}
render();
})();
更多推荐
html5+css3雪花效果,html5 css3雪花水晶球动画场景特效
发布评论