使用Canvas繪制花朵

2024-09-05 12:18:57

字體：大中小

供稿：網(wǎng)友

使用HTML5的Canvas繪制花朵，可以繪制出三種類型的花朵：蓬萊菊、令箭荷花、大麗花，通過下拉框選擇花朵類型，點(diǎn)擊“繪制”按鈕即刻繪出該花朵圖案，用Canvas似乎是很簡單的事情，但用傳統(tǒng)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文字跟隨鼠標(biāo)變換角度

下一篇：新聞段落滾動(dòng)HTML5代碼向上無縫循環(huán)