HTML5——Canvas_03之【使用bezierCurveTo绘制贝塞尔曲线】

最新推荐文章于 2025-05-17 11:59:47 发布

原创最新推荐文章于 2025-05-17 11:59:47 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Canvas

Html5 同时被 2 个专栏收录

15 篇文章

订阅专栏

Canvas

9 篇文章

订阅专栏

本文介绍了一个利用HTML5的Canvas API中的bezierCurveTo方法来绘制复杂贝塞尔曲线的技术。通过数学公式计算控制点并进行迭代，生成了一系列的贝塞尔曲线，最终形成一个视觉上连续且复杂的图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>使用bezierCurveTo绘制贝塞尔曲线</title>
    
    <script>
        function draw(id){
           var canvas=document.getElementById(id);
           if(canvas==null)
           {
               return false;
           }
           var context=canvas.getContest("2d");
           context.fillRect(0,0,300,400);
           var dx=150;
           var dy=150;
           var s=100;
           context.beginPath();
           context.fillStyle="rgb(100,255,100)";
           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);
               
               //moveTo(dx,dy);//设置原点位置,开始点
               //控制点1:dx+x*s,dy+y*s-100
               //控制点2:dx+x*s+100,dy+y*s
               //结束点:dx+x*s,dy+y*s
               context.bezierVurveTo(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>
    
    
</head>

<body onload="draw("canvas");">
   <canvas id="canvas" width="300" height="400"></canvas>
</body>

</html>