如何使用工具（曲率）制作貝塞爾曲線
[英]how to make a bezier curve using a tool(curvature)
問題描述
function letraT1(c2d) { c2d.beginPath(); c2d.moveTo(0.376, 0.32); c2d.bezierCurveTo(0.349,0.223,0.426,0.217,0.453,0.399); c2d.moveTo(0.376, 0.32); c2d.closePath(); } function main() { var c2d = document.getElementById("acanvas").getContext("2d"); example_space(c2d); } function enter(c, dx, dy, sx, sy) { c.save(); c.translate(dx,dy); c.scale(sx,sy); } function leave(c, fs, ss) { c.restore(); c.fillStyle = fs; c.strokeStyle = ss; c.fill(); c.stroke(); } function leave_plus(c, lw, fs, ss) { c.restore(); c.fillStyle = fs; c.strokeStyle = ss; c.lineWidth = lw; c.fill(); c.stroke(); } function castelo(c) { c.strokeStyle = "#00B4E9"; c.lineWidth = 0.01; //has others things here but they wasnt relevant for the problem so i didnt put. enter(c, 0.1,0.15, 0.5, 0.45); letraT1(c); leave_plus(c, 0, "#211F22", "#211F22"); // // // } function example_space(c) { enter(c, 20,20, 400,505); castelo(c); leave(c, c.fillStyle, c.strokeStyle); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="novaversao.js"> </script> </head> <body onload="main();"> <canvas id="acanvas" width="1028" height="1028" /> </body> </html>
我正在使用此工具（ https://canvature.appspot.com/#absolute=true&starting=376,32&bezier=349,223,426,217,453,399 ）設計貝塞爾曲線，但是當我嘗試在代碼中執行此操作時，它的方式非常奇怪看起來。
所以我的問題是如何使曲線看起來像在Canvature中繪制的曲線。
我從此圖像繪制曲線：
1 個解決方案
解決方案1
0 已采納 2018-05-10 20:45:00
參考我的評論。
刪除這兩個方法中的fill()調用。 fill()方法關閉路徑，並用fillStyle顏色填充結果形狀。
您必須同時刪除這兩個函數，因為您同時調用了兩個函數。
function letraT1(c2d) { c2d.beginPath(); c2d.moveTo(0.376, 0.32); c2d.bezierCurveTo(0.349,0.223,0.426,0.217,0.453,0.399); c2d.moveTo(0.376, 0.32); c2d.closePath(); } function main() { var c2d = document.getElementById("acanvas").getContext("2d"); example_space(c2d); } function enter(c, dx, dy, sx, sy) { c.save(); c.translate(dx,dy); c.scale(sx,sy); } function leave(c, fs, ss) { c.restore(); c.fillStyle = fs; c.strokeStyle = ss; // c.fill(); c.stroke(); } function leave_plus(c, lw, fs, ss) { c.restore(); c.fillStyle = fs; c.strokeStyle = ss; c.lineWidth = lw; // c.fill(); c.stroke(); } function castelo(c) { c.strokeStyle = "#00B4E9"; c.lineWidth = 0.01; //has others things here but they wasnt relevant for the problem so i didnt put. enter(c, 0.1,0.15, 0.5, 0.45); letraT1(c); leave_plus(c, 0, "#211F22", "#211F22"); // // // } function example_space(c) { enter(c, 20,20, 400,505); castelo(c); leave(c, c.fillStyle, c.strokeStyle); }
canvas { background-color: #00B4E9 }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="novaversao.js"> </script> </head> <body onload="main();"> <canvas id="acanvas" width="1028" height="1028" /> </body> </html>
如何在JavaScript中創建貝塞爾曲線？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.