使用Canvas绘制花朵

2024-09-05 12:18:57

字体：大中小

来源：转载

供稿：网友

使用HTML5的Canvas绘制花朵，可以绘制出三种类型的花朵：蓬莱菊、令箭荷花、大丽花，通过下拉框选择花朵类型，点击“绘制”按钮即刻绘出该花朵图案，用Canvas似乎是很简单的事情，但用传统HTML似乎却束手无策。

<!DOCTYPE html ><html><head><meta charset="utf-8" /><title>使用Canvas元素绘制花朵</title><script type="text/javascript">var context;var A,n;function btn_onclick(){	var width;	var height	var canvas;	var Xo,Yo;	var k;	canvas = document.getElementById("canvas");	width = canvas.width;	height = canvas.height;	context = canvas.getContext('2d');	Xo = width/2;	Yo = height/2;	k = parseInt(document.getElementById("drawType").value);	if(k == 2)	    A = Yo*0.25;	else        A = Yo*0.75;	context.save();	context.clearRect(0,0,width,height);	context.translate(Xo,Yo);	context.beginPath();	for(var B=0;B<= 6.28;B=B+0.01){		draw(B);	    }	context.closePath();	context.restore();	}function draw(B){	var n = 10;	switch(parseInt(document.getElementById("drawType").value)){		case 3:		      r = A*Math.sin(n*B)*Math.exp(-B/(20));		       break;		case 2:		      r = A*(Math.sin(n*B) + 3*Math.sin(3*n*B));			  break;		case 1:		      r=A*Math.sin(n*B); 		}		x = r*Math.cos(B);		y = r*Math.sin(B);	 	 context.fillStyle = "green";	 context.strokeStyle = "black";	 context.lineTo(-x,-y);	 context.fill();	 context.stroke();	}</script></head><body><h1 align="center">使用Canvas绘制美丽的花朵</h1>花的类型:<select id="drawType"><option value="1">蓬莱菊</option><option value="2">令箭荷花</option><option value="3">大丽花</option></select><input type="button" id="btn" value="绘制" onclick="btn_onclick()" /><br/><canvas id="canvas" width="200px" height="200px"></canvas></body></html>

上一篇：CSS3 3d文字跟随鼠标变换角度

下一篇：新闻段落滚动HTML5代码向上无缝循环

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注