canvas bezierCurveTo() 三次贝塞尔曲线

2019-8-29 10:59| 作者: admin| 查看: 291| 评论: 0|来自: 蚂蚁部落

bezierCurveTo()方法可以绘制三次赛贝尔曲线。

可以结合绘制二次赛贝尔曲线学习,具体参阅canvas quadraticCurveTo()一章节。

二次赛贝尔曲线只能够在一侧弯曲,三次赛贝尔曲线可以在两侧弯曲,后面代码图示演示。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

参数解析:

(1).cp1x和cp1y:必需,第一个控制点坐标。

(2).cp2x和cp2y:必需,第二个控制点坐标。

(3).x和y:必需,结束点的坐标。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/110023nypagm0jm6ogj9nj.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是一个简单三次赛贝尔曲线的示意图,说明如下:

(1).黑色曲线是真正要绘制的三次塞贝尔曲线,黄色是辅助线。

(2).控制点1与开始点的连线与曲线相切。

(3).控制点2与结束点的连线与曲线相切。

(4).上述塞贝尔曲线并没有和前文阐述的那样,可以两侧弯曲,只有一个向下的弯曲。

(5).这是因为控制点都在开始点与结束点连线的一侧。

浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).Opera浏览器支持此方法。

(6).Safari浏览器支持此方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border:2px dotted red;
}
</style>
<script>
window.onload = () => {
  let canvas = document.getElementById("canvas");
  let range = document.getElementById("range");
  let ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(50,50);
  ctx.bezierCurveTo(20, 100, 200, 20, 200, 50);
  ctx.stroke();
    
  //辅助线
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(200, 50);
  ctx.strokeStyle = "red";
  ctx.stroke();
  
  //辅助线
  ctx.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(50, 50);
  ctx.lineTo(20, 100);
  ctx.moveTo(200, 50);
  ctx.lineTo(200, 20);
  ctx.stroke();
  
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/110101bvx4wwexg7rp022m.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码绘制了一个两侧弯曲的三次塞贝尔曲线,简单分析如下:

(1).开始点与控制点1的连线与曲线相切。

(2).结束点与控制点2的连线与曲线相切。

(3).因为控制点分别在开始点与结束点连线的两侧,所以是两侧弯曲。


鲜花

握手

雷人

路过

鸡蛋
上一篇:canvas scale()
返回顶部