HTML5动画----canvas基础2（绘制贝塞尔曲线）

最新推荐文章于 2024-08-16 15:33:06 发布

wenmin1987

最新推荐文章于 2024-08-16 15:33:06 发布

阅读量1.1k

点赞数

分类专栏： HTML5动画文章标签： canvas绘制曲线

本文链接：https://blog.csdn.net/wenmin1987/article/details/94337238

版权

HTML5动画专栏收录该内容

10 篇文章 0 订阅

订阅专栏

贝塞尔曲线图能够绘制出复杂的图形，主要用于数值分析领域或者产品设计和动画制作领域

绘制二次方曲线：context.quadraticCurveTo(cpx,cpy,x,y)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>

       <canvas id="myCanvas" style="border: solid 1px;" width="300" height="200"></canvas>
       <script type="text/javascript">
           var c = document.getElementById("myCanvas");
           var context = c.getContext('2d');
           //绘制二次方贝塞尔曲线context.quadraticCurveTo(cpx,cpy,x,y)
           context.strokeStyle="dark";
           context.beginPath();
           context.moveTo(0,200);
           context.quadraticCurveTo(75,50,300,200);//cpx,cpy,x,y cpx,cpy--(控制点坐标)x,y(终点坐标)
           context.stroke();
           context.globalCompositeOperation = "source-over";
           //绘制的直线用于表示曲线上的控制点和控制线，两直线的交点为控制点
           context.strokeStyle = "#ff00ff";
           context.beginPath();
           context.moveTo(75,50);
           context.lineTo(0,200);
           context.moveTo(75,50);
           context.lineTo(300,200);
           context.stroke();
       </script>
   </body>
</html>

绘制三次方曲线：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>

       <canvas id="myCanvas" style="border: solid 1px;" width="300" height="200"></canvas>
       <script type="text/javascript">
           var c = document.getElementById("myCanvas");
           var context = c.getContext('2d');
           //绘制三次方贝塞尔曲线context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
           context.strokeStyle="dark";
           context.beginPath();
           context.moveTo(0,200);
           context.bezierCurveTo(25,50,75,50,300,200);//cp1x,cp1y,cp2x,cp2y,x,y cp1x,cp1y,cp2x,cp2y--(控制点坐标)x,y(终点坐标)
           context.stroke();
           context.globalCompositeOperation = "source-over";
           //绘制的直线用于表示曲线上的控制点和控制线，控制点1(25,50) 控制点2(75,50)
           context.strokeStyle = "#ff00ff";
           context.beginPath();
           context.moveTo(25,50);
           context.lineTo(0,200);
           context.moveTo(75,50);
           context.lineTo(300,200);
           context.stroke();
       </script>
   </body>
</html>