用canvas绘制花朵

最新推荐文章于 2022-08-14 16:13:08 发布

weixin_30633949

最新推荐文章于 2022-08-14 16:13:08 发布

阅读量666

点赞数

原文链接：http://www.cnblogs.com/yangyu54/p/4597336.html

版权

一代码

<!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>