canvas 贝塞尔曲线

 示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>draw curve</title>
</head>
<!-- https://www.jianshu.com/p/2163fd8f085e -->
<!-- http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html -->
<!-- https://github.com/hujiulong/blog/issues/1 -->

<body>
  <canvas id="canvas" width="500" height="500" style="border:1px solid red;"></canvas>
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.strokeStyle = 'blue'; // 线的颜色， 线的粗细
    ctx.lineWidth = 4;    
    // 三次贝塞尔曲线 起始点
    ctx.moveTo(100, 300);
    //（从上一点）
    ctx.bezierCurveTo(150, 250, 250, 350, 300, 300);
    ctx.stroke();
 
  </script>
</body>

</html>

 

 

 

 

 

 

 

转：https://www.jianshu.com/p/2163fd8f085e

曲线编辑效果：http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

绘制贝塞尔曲线动画教程   https://github.com/hujiulong/blog/issues/1

 canvas 画上图片： https://www.cnblogs.com/superstar/p/5118683.html

canvas实现不同透明度画图 https://www.jianshu.com/p/b275468d30db

 学习文档： https://www.canvasapi.cn/CanvasRenderingContext2D/globalAlpha#&examples

 

.

 

posted @ 2020-03-04 16:00  James2019  阅读(441)  评论(0)  编辑  收藏  举报