我正在尝试制作眼睛的白色部分:
但我不知道我做错了什么，也许这不是假设使用 arcTo，问题是我如何做眼 Angular ？
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>最佳答案
用quadraticCurveTo分别画上半部分和下半部分，像这样:
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);<html>
<body>
<canvas id="eye-canvas" width="300" height="150" style="border:1px solid #ddd;" />
</body>
</html>关于javascript - 如何使用 arcTo 制作眼睛，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50091442/