如果 moveTo 和 bezierCurveTo 起點不完全相同，我無法在畫布上繪制 bezierCurveTo，即 moveTo 中的 4 個小數點和 bezierCurveTo 中的 6 個小數點和 lineWidth 更多 1
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "4"
ctx.moveTo(33.7605,56.51376);
ctx.bezierCurveTo(33.76049625,56.51376,117.53628,247.02303,742.75229,221.65138);
ctx.stroke();<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">uj5u.com熱心網友回復：
你甚至不需要ctx.moveTo. 另外，ctx.lineWidth應該是一個數字。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 4;
ctx.bezierCurveTo(33.76049625,56.51376,117.53628,247.02303,742.75229,221.65138);
ctx.stroke();<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">uj5u.com熱心網友回復：
貝塞爾曲線的型別
bezierCurveTo()向路徑添加三次貝塞爾曲線。一個三次貝塞爾曲線有一個起點和終點以及兩個控制點（共4個點）
quadraticCurveTo()向路徑添加二次貝塞爾曲線。一個二次貝塞爾曲線有一個起點和終點和一個控制點（共3個點）
使控制點遠離端點
兩個貝塞爾曲線的第一個點是添加到當前路徑的最后一個點。在起點或終點上添加控制點會導致問題。這可能是由于起點或終點與控制點之間的距離為零，并且不可能沿零長度的線進行插值。
使用二次曲線（3 點）
由于您只給出了 3 個獨特的點，我假設您想要一個二次曲線而不是三次曲線。
因此，您可以更改代碼
ctx.moveTo(33.7605,56.51376); // start point
ctx.bezierCurveTo(
33.76049625, 56.51376, // control point 1 duplicated coordinate (too close)
117.53628, 247.02303, // control point 2
742.75229, 221.65138 // end point
);
并使用quadraticCurveTo, 作為...
ctx.moveTo(33.76049625, 56.51376); // start point
ctx.quadraticCurveTo(
117.53628, 247.02303, // control point 1
742.75229, 221.65138 // end point
);
例子
紅色曲線是具有未定義起點的立方。據我所知，沒有起點，行為是未定義的。
黑色曲線是代碼中 3 個坐標的二次方。
顯示代碼片段
const ctx = myCanvas.getContext("2d");
ctx.lineWidth = 4; ctx.strokeStyle = "Red";
ctx.beginPath();
ctx.bezierCurveTo(
33.76049625, 56.51376, // control point 1 duplicated coordinate (too close)
117.53628, 247.02303, // control point 2
742.75229, 221.65138); // end point
ctx.stroke();
ctx.strokeStyle = "Black";
ctx.beginPath();
ctx.moveTo(33.76049625, 56.51376); // start point
ctx.quadraticCurveTo(
117.53628, 247.02303, // control point 1
742.75229, 221.65138); // end point
ctx.stroke();<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/422350.html
標籤：