html5中canvas贝塞尔曲线绘制菊花

最新推荐文章于 2023-04-20 17:12:44 发布

cherishSpring

最新推荐文章于 2023-04-20 17:12:44 发布

阅读量2.3k

点赞数

分类专栏： # html 文章标签： html5 canvas

本文链接：https://blog.csdn.net/cherishSpring/article/details/52046445

版权

html 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>canvas贝塞尔曲线绘制菊花</title>

   </head>
   <body>
       <canvas id="myCanvas" width="800" height="800"></canvas>

       
       <script type="text/javascript">
           var canvas=document.getElementById("myCanvas");
           var context=canvas.getContext('2d');

           context.fillStyle="black";
           context.fillRect(0,0,400,300);
           var n=0;
           var dx=150;
           var dy=150;
           var s=100;
           context.beginPath();
           context.globalCompositeOperation='and';
           context.fillStyle="darkorange";
           var x=Math.sin(0);
           var y=Math.cos(0);
           var dig=Math.PI/15*11;
           context.moveTo(dx,dy);
           for(var i=0;i<30;i++){
               var x=Math.sin(i*dig);
               var y=Math.cos(i*dig);
               context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
           }
           context.closePath();
           context.fill();
           context.stroke();
       </script>
   </body>

</html>