标签：
一 代码
<!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; 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> <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>
标签：
原文地址：http://www.cnblogs.com/yangyu54/p/4597336.html
