HTML菊花图案绘制,用HTML5中的canvas元素画菊花

用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绘制美丽的花朵

花的类型:

蓬莱菊

令箭荷花

大丽花