Question

我正试图制造眼睛的白色部分：

但是我不知道我做错了什么，也许这不是假设使用arcTo，问题是我该怎么做眼角？

function main() {
    var c2d = document.getElementById("acanvas").getContext("2d");	 
    olho(c2d);
}
function olho(c2d) {
	c2d.fillStyle = 'blue';
// starting point
	c2d.fillRect(120, 220, 10, 10);

	c2d.fillStyle = 'red';
// control point one
	c2d.fillRect(155, 220, 10, 10);
// control point two
	c2d.fillRect(190, 220, 10, 10);
	c2d.strokeStyle = "black";
	c2d.beginPath();
	c2d.moveTo(120, 220);
	c2d.arcTo(190, 220, 155, 220, 30);
	c2d.stroke();	
		

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="book.js">

    


        </script>
    </head>
    <body onload="main();">
        <canvas id="acanvas" width="1028" height="1028" />
    </body>
</html>

Answer 1

使用quadraticCurveTo分别绘制上半部分和下半部分，如下所示：

＆＃13;

function draw(ctx, x, y, w, h)
{
  let c = x + w / 2;
  ctx.beginPath();
  ctx.moveTo(x, y);
  // upper arc
  ctx.quadraticCurveTo(c, y - h, x + w, y);
  // lower arc
  ctx.quadraticCurveTo(c, y + h, x, y);
  ctx.stroke();
}

const cnv = document.getElementById("eye-canvas");
const ctx = cnv.getContext("2d");

// context, x/y position, width, height
draw(ctx, 10, 75, 280, 130);

＆＃13;

<html>
<body>
  <canvas id="eye-canvas" width="300" height="150" style="border:1px solid #ddd;" />
</body>
</html>

＆＃13;

如何使用arcTo

1 个答案: