Question

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中绘制的曲线。

我从这张图片中绘制曲线：

Answer 1

参考我的评论。

在两种方法中删除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>

如何使用工具制作贝塞尔曲线（曲率）

1 个答案: