資訊專欄INFORMATION COLUMN
摘要：貝塞爾曲線提供了兩個繪制貝塞爾曲線二次貝塞爾曲線，控制點終點三次貝塞爾曲線，控制點一控制點二，終點題外話貝塞爾曲線的數學基礎是早在年就廣為人知的伯恩斯坦多項式。的屬性，取值就可以設置為一個三次貝塞爾曲線方程。
3.4 貝塞爾曲線
canvas提供了兩個繪制貝塞爾曲線api:
ctx.quadraticCurveTo(cpx, cpy, x, y);
二次貝塞爾曲線，(cpx, cpy)控制點 (x, y)終點
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
三次貝塞爾曲線，(cp1x, cp1y)控制點一, (cp2x, cp2y)控制點二， (x, y)終點
題外話：
貝塞爾曲線的數學基礎是早在 1912 年就廣為人知的伯恩斯坦多項式。最早用來輔助汽車車體的工業設計。
CSS3的transition-timing-function屬性，取值就可以設置為一個三次貝塞爾曲線方程transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)。
canvas繪圖示例：
// 二次 ctx.moveTo(200, 100); ctx.quadraticCurveTo(230, 250, 350, 200); // 三次 ctx.moveTo(450, 250); ctx.bezierCurveTo(530, 150, 650, 300, 700, 200);
藍色是控制點
問題一：
那canvas是如何通過控制點來繪制出曲線的，或者如果不用這個，自己繪制曲線該如何操作呢：
這個是n階貝塞爾曲線的方程：
我們重點看二(三)階方程：
B(t)是曲線上的點，t在0~1之間取值， P0起始點，P2終點，P1控制點
t從0~1之間取值不斷增大，B(t)不斷取出曲線上的點，從P0移至P1
const bx = (1-t)*(1-t)*start.x + 2*t*(1-t)*control.x + t*t*end.x; const by = (1-t)*(1-t)*start.y + 2*t*(1-t)*control.y + t*t*end.y;
問題二：
我咋知道控制點該怎么選，特別是起終點動態數據時(也就是說，我們使用時，往往只知道起點P0終點P1)：
這個根據曲線斜率，可視化需求可能選取的方式不一致，不過大致原理相似
可以在起點和終點的垂直平分線上選一點作為控制點, 然后用一個參數來控制曲線的彎曲程度
// curveness 彎曲程度(0-1)
const cp = {
x: ( start.x + end.x ) / 2 - ( start.y - end.y ) * curveness,
y: ( start.y + end.y ) / 2 - ( end.x - start.x ) * curveness
};
題外話：
關于cp點的求解：
線段中點:
const mid = [ ( start.x + end.x) / 2, ( start.y + end.y ) / 2 ];
根據起點和終點也可以得到一個向量v:
const v = [ end.x - start.x, end.y- start.y ];
將這個向量順時針旋轉90度，得到一個垂直于它的向量v2:
const v2 = [ v.y, -v.x ];
那么中間控制點的坐標為(向量v2乘curveness加上中間點坐標)const cp = { x: mid.x + v2.x curveness, y: mid.y + v2.y curveness} =
{ x:( start.x + end.x ) / 2 - ( start.y - end.y ) * curveness,
y:( start.y + end.y ) / 2 - ( end.x - start.x ) * curveness}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108901.html
摘要：矩形只支持一種原生的圖形繪制矩形。所有其他的圖形的繪制都至少需要生成一條路徑。繪制矩形三種方法繪制一個填充的矩形繪制一個矩形的邊框清除指定矩形區域，讓清除部分完全透明。矩形示例路徑圖形的基本元素是路徑。 2. 矩形 canvas只支持一種原生的圖形繪制：矩形。 所有其他的圖形的繪制都至少需要生成一條路徑。 繪制矩形三種方法： // 繪制一個填充的矩形 fillRect(x, y, ...
摘要：本文作者利用一些簡單的對進行了系統的總結，受益匪淺，毫不夸張的說，學習這一篇文章就夠了一簡介是新增的，一個可以使用腳本通常為在其中繪制圖像的元素。 本文作者利用一些簡單的 demo 對 Canvas 進行了系統的總結，受益匪淺，毫不夸張的說，學習 Canvas 這一篇文章就夠了！ 一、canvas簡介 ? 是 HTML5 新增的，一個可以使用腳本(通常為JavaScript)在其中繪...
閱讀 3734·2021-10-15 09:42
閱讀 2594·2021-09-03 10:50
閱讀 1628·2021-09-03 10:28
閱讀 1788·2019-08-30 15:54
閱讀 2510·2019-08-30 12:46
閱讀 401·2019-08-30 11:06
閱讀 2818·2019-08-30 10:54
閱讀 521·2019-08-29 12:59
