一 代码
<!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>
时间： 2024-08-25 14:32:26