1、绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪: ![javascript 贝塞尔曲线算法 canvas贝塞尔曲线_javascript 贝塞尔曲线算法](https://s2.51cto.com/images/blog/202306/09095908_6482876c9d22814939.gif)
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width:300px; height: 300px;}
canvas{background: #fff;}
window.onload = function(){
var c = document.getElementById('myCanvas');
var content = c.getContext('2d');
//绘制二次方贝塞尔曲线
content.strokeStyle ="#FF5D43";
content.beginPath();
content.moveTo(0,200);
content.quadraticCurveTo(75,50,300,200);
content.stroke();
content.globalCompositeOperation = 'source-over'; //目标图像上显示源图像
//绘制上面曲线的控制点和控制线,控制点坐标为两直线的交点(75,50)
content.strokeStyle = '#f0f';
content.beginPath();
content.moveTo(75,50);
content.lineTo(0,200);
content.moveTo(75,50);
content.lineTo(300,200);
content.stroke();
};
![javascript 贝塞尔曲线算法 canvas贝塞尔曲线_html_02](https://s2.51cto.com/images/blog/202306/09095908_6482876c94b5614804.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
2、三次方贝塞尔曲线 bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 其中参数cp1x,cp1y表示第一个控制点的坐标, cp2x,cp2y表示第二个控制点的坐标, x,y是终点的坐标; 数学公式表示如下: P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。 ![javascript 贝塞尔曲线算法 canvas贝塞尔曲线_贝塞尔曲线_03](https://s2.51cto.com/images/blog/202306/09095908_6482876ca99f265362.gif)
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width:300px; height: 300px;}
canvas{background: #fff;}
window.onload = function(){
var c = document.getElementById('myCanvas');
var content = c.getContext('2d');
//三次方贝塞尔曲线
content.strokeStyle = '#FA7E2A';
content.beginPath();
content.moveTo(25,175);
content.bezierCurveTo(60,80,150,30,170,150);
content.stroke();
content.globalCompositeOperation = 'source-over';
//绘制起点、控制点、终点
content.strokeStyle = 'red';
content.beginPath();
content.moveTo(25,175);
content.lineTo(60,80);
content.lineTo(150,30);
content.lineTo(170,150);
content.stroke();
};
![javascript 贝塞尔曲线算法 canvas贝塞尔曲线_javascript 贝塞尔曲线算法_04](https://s2.51cto.com/images/blog/202306/09095908_6482876ca743b4180.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
|