我想用 來畫一個圖bezierCurveTo()。據我所知，只能設置 3 個錨點 1 bezierCurveTo()。如果我使用多個，我會得到一條不平滑的線。我該如何解決這個問題？<canvas id="myCanvas" width="600" height="150" style="border:1px solid #d3d3d3;"></canvas><script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(0, 150); context.bezierCurveTo(100, 0, 200, 100, 300, 20); context.bezierCurveTo(400, 0, 500, 100, 600, 20); context.strokeStyle = 'blue'; context.stroke();</script>
2 回答
皈依舞
TA貢獻1851條經驗 獲得超3個贊
這是一個不平凡的問題。這取決于您想要實現的平滑程度（只需連接切線，或使連接點的曲線半徑相同）。最簡單的方法如圖所示（[A3-X] / [X-B2] = [A3-A4] / [B1-B2]；從 A4 開始 [A3-X] 向量，從 B1 開始 [X-B2] 到獲取 A3x 和 B2x 錨點）。
但您也可以查看D3 Shape 模塊（例如 Catmul Rom 曲線），它會從它應該經過的點生成貝塞爾樣條曲線?；蛘呖纯茨程幍乃惴?。
www說
TA貢獻1775條經驗 獲得超8個贊
我們可以將所有曲線放入一個數組中，然后循環它們，在繪制下一條貝塞爾曲線之前移動到最后一個點。下面是示例代碼：
<canvas id="myCanvas" width="600" height="150"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function drawCurve(x, y, curves) {
context.beginPath();
context.moveTo(x, y);
for (i = 0; i < curves.length; i++) {
c = curves[i]
context.bezierCurveTo(c[0], c[1], c[2], c[3], c[4], c[5]);
context.moveTo(c[4], c[5]);
context.stroke();
}
}
context.strokeStyle = 'blue';
drawCurve(0, 150, [
[100, 0, 200, 100, 300, 50],
[400, 0, 500, 100, 600, 20]
]);
context.strokeStyle = 'red';
drawCurve(0, 10, [
[100, 0, 180, 90, 280, 50],
[400, 0, 400, 80, 600, 120]
]);
context.strokeStyle = 'green';
drawCurve(0, 80, [
[100, 0, 90, 45, 140, 25],
[200, 0, 200, 40, 300, 50],
[500, 60, 400, 80, 300, 120],
[300, 120, 200, 160, 100, 80],
]);
</script>
但“不平滑的線”也取決于你的曲線，如果它們的方向完全相反，我們會看到尖銳的邊緣。
請參閱下面的示例，我正在繪制一顆星星。
<canvas id="myCanvas" width="150" height="150"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function drawCurve(x, y, curves) {
context.moveTo(x, y);
for (i = 0; i < curves.length; i++) {
c = curves[i]
context.bezierCurveTo(c[0], c[1], c[2], c[3], c[4], c[5]);
context.moveTo(c[4], c[5]);
}
context.stroke();
}
data = []
numPoints = 12
size = 35
angle = 45
for (j = 0; j < numPoints; j++) {
a = angle * Math.PI / 180
points = []
points.push(80 + Math.round(size / 2 * Math.sin(a)))
points.push(80 + Math.round(size / 2 * Math.cos(a)))
points.push(80 + Math.round(size * Math.sin(a)))
points.push(80 + Math.round(size * Math.cos(a)))
points.push(80 + Math.round(size * 2 * Math.sin(a)))
points.push(80 + Math.round(size * 2 * Math.cos(a)))
angle += 360 / numPoints
data.push(points)
}
drawCurve(80, 80, data);
</script>
- 2 回答
- 0 關注
- 218 瀏覽
添加回答
舉報
0/150
提交
取消