要创建一个HTML5的画布——贝塞尔曲线，我们可以使用bezierCurveTo()方法。Bezier曲线定义点有两个控制点和一个结束点。与二次曲线相比，Bezier曲线定义有两个控制点，而不是一个，使您能够创建更复杂的曲线。
具体代码如下：
- context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
案例的JavaScript代码：
- window.onload = function(){
- var canvas = document.getElementById("myCanvas");
- var context = canvas.getContext("2d");
- context.moveTo(188, 130);
- var controlX1 = 140;
- var controlY1 = 10;
- var controlX2 = 388;
- var controlY2 = 10;
- var endX = 388;
- var endY = 170;
- context.bezierCurveTo(controlX1, controlY1, controlX2
- controlY2, endX, endY);
- context.lineWidth = 10;
- context.strokeStyle = "black"; // line color
- context.stroke();
- };
关于为什么要使用这些代码，我们用一张图片来解释一下：
贝塞尔曲线的定义是由当前的上下文和两个控制点以及结束点控制的。曲线的第一部分是切向的假想线，是由上下文点和第一个控制点定义。第二部分的曲线相切的假想线，是第二个控制点和结束点定义。
转自我爱猫猫技术博客
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
