Canvas雪花飘飞，html5代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<title>Canvas雪花飘啊飘</title>
</head>
<body>
<canvas id="mc" width="420" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
function createFlower(context,n,dx,dy,size,length){
	context.beginPath();
	context.moveTo(dx,dy+size);
	var dig = 2*Math.PI/n;
	for(var i=1;i<n+1;i++){
		var ctrlX = Math.sin((i-0.5)*dig)*length+dx;
		var ctrlY = Math.cos((i-0.5)*dig)*length+dy;
		var x = Math.sin(i*dig)*size+dx;
		var y = Math.cos(i*dig)*size+dy;
		context.quadraticCurveTo(ctrlX,ctrlY,x,y);
	}
	context.closePath();
}
snowPos = [
{x:50,y:44,z:5},{x:140,y:35,z:3},
{x:360,y:20,z:1},{x:250,y:50,z:2},
{x:110,y:90,z:4},{x:310,y:85,z:2},
{x:65,y:160,z:5},{x:205,y:130,z:5},
{x:300,y:150,z:3},{x:260,y:210,z:1},
{x:375,y:215,z:3},{x:155,y:230,z:2},
{x:30,y:270,z:4},];
function fall(context){
	context.fillStyle = "#000";
	context.fillRect(0,0,420,280);
	context.fillStyle = "#fff";
	for(var i=0,len=snowPos.length;i<len;i++){
		context.save();
		context.translate(snowPos[i].x,snowPos[i].y);
		context.rotate((Math.random()*6-3)*Math.PI/10);
		snowPos[i].y += Math.random()*18;
		if(snowPos[i].y>280){
			snowPos[i].y=4;
		}
		createFlower(context,6,0,0,snowPos[i].z,8);
		context.fill();
		context.restore();
	}
}
var canvas = document.getElementById("mc");
var ctx = canvas.getContext("2d");
setInterval("fall(ctx);",200);
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Canvas雪花飘飞，html5代码

分类

HTML5代码

描述

又一款HTML5&Canvas雪花特效，运行网页后可看到动态效果的雪花飘飘落下，随机位置，随机数量，速度可调节，Canvas好东西，学习好不后悔。此代码分享给喜欢HTML5动画的朋友参考。