- <!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>
- //该片段来自于http://www.codesnippet.cn/detail/040220132099.html
来源: http://www.codesnippet.cn/detail/040220132099.html