一 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><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;elseA=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><h1>使用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></head> <body></body> </html>
