HTML5 Canvas花朵生成器特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 Canvas花朵生成器特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas花朵生成器</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
    <canvas id="canvas"></canvas>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

canvas = document.getElementById('canvas');
	canvas.addEventListener("mousedown",doMouseDown,false);
	w = canvas.width = window.innerWidth;
	h = canvas.height = window.innerHeight;
	ctx = canvas.getContext('2d');
	//global variablesvar fps = 30;
	var interval = 1000 / fps;
	var frame = 0;
	var sf = Math.min(w,h)/1.5;
	//scale factorvar grd=ctx.createRadialGradient(w/2,h/2,0,w/2,h/2,sf*1.2);
	grd.addColorStop(0,"rgba(255,255,255,.25)");
	grd.addColorStop(1,cb(rand(200,255),rand(200,255),rand(200,255),25));
	//flowers!var num_flowers = 7;
	var fs = [];
	for (var i = 0;
	i < num_flowers;
	i++){
	fs.push({
	size:rand(1,10),petals:rand(4,12),rot:rand(-5,5),c:[rand(100,255),rand(100,255),rand(100,255)],x:w/2,y:h/2}
);
}
fs.sort(function(a,b){
	return parseFloat(b.size) - parseFloat(a.size)}
);
	draw();
	function draw(){
	setTimeout(function(){
	window.requestAnimationFrame(draw);
	frame+=1;
	//clear canvas ctx.shadowBlur = 0;
	ctx.fillStyle = grd;
	ctx.fillRect(0,0,w,h);
	for (var i = 0;
	i < num_flowers;
	i++){
	draw_flower(sf*fs[i].size/10,fs[i].petals*2,0,fs[i].rot/15,fs[i].c,fs[i].x,fs[i].y);
}
}
,interval);
}
function cb(r,g,b,o){
	return "rgba(" + r + "," + g + "," + b + "," + o + ")";
}
function add_flower(_x,_y){
	fs.push({
	size:rand(1,5),petals:rand(4,12),rot:rand(-15,15),c:[rand(100,255),rand(100,255),rand(100,255)],x:_x,y:_y}
);
	num_flowers++;
}
function draw_flower(_rad,_num_pts,init_angle,spin_vel,c,_x,_y){
	ctx.shadowBlur = 50;
	ctx.lineWidth = 1;
	ctx.shadowColor = cb(c[0],c[1],c[2],1);
	ctx.fillStyle = cb(c[0],c[1],c[2],.6);
	c2 = [Math.floor(c[0]/1.6),Math.floor(c[1]/1.6),Math.floor(c[2]/1.6)];
	ctx.strokeStyle = cb(c2[0],c2[1],c2[2],1);
	var pts = [];
	for (var i = 0;
	i <= _num_pts;
	i++){
	var _a = (360/_num_pts) * i + init_angle + frame*spin_vel;
	pts.push({
	x:P2L(_rad,_a).x,y:P2L(_rad,_a).y}
);
}
for (var i = 1;
	i<= _num_pts;
	i+=2){
	idx= i%_num_pts;
	ctx.beginPath();
	ctx.moveTo(_x,_y);
	ctx.bezierCurveTo(_x+pts[i-1].x,_y+pts[i-1].y,_x+pts[idx+1].x,_y+pts[idx+1].y,_x,_y);
	ctx.stroke();
	ctx.fill();
}
}
function rand(min,max){
	return Math.round(Math.random() * (max - min) + min);
}
//polar to linear coordinate transformfunction P2L(r,angle){
	var ret ={
	x:0,y:0}
;
	ret.x = Math.cos(angle*Math.PI/180)*r;
	ret.y = Math.sin(angle*Math.PI/180)*r;
	return (ret);
}
function doMouseDown(event){
	var totalOffsetX = 0;
	var totalOffsetY = 0;
	var canvasX = 0;
	var canvasY = 0;
	var currentElement = this;
	do{
	totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
	totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while(currentElement = currentElement.offsetParent) canvasX = event.pageX - totalOffsetX;
	canvasY = event.pageY - totalOffsetY;
	add_flower(canvasX,canvasY)}

CSS代码(style.css):

#canvas{cursor:crosshair;overflow:hidden;}
body{overflow:hidden;}

附件:下载该文件资源,减少时间成本(增值服务)

.rar

2.65 KB

立即下载(CNY 2.9￥)

打赏收藏

分享到QQ

分享到微博

微信扫一扫

留言

该资源可下载

.rar

2.65 KB

立即下载

萧华

了解

打赏作者鼓励作者

html5特效