用html5中的canvas画出的三种菊花,书上看到的例子,拿来当联系玩。
使用Canvas元素绘制美丽的花朵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();
}
使用Canvas绘制美丽的花朵
花的类型:
蓬莱菊
令箭荷花
大丽花