gpt4 book ai didi

javascript - 如何使用 arcTo 制作眼睛

转载 作者:搜寻专家 更新时间:2023-10-31 08:23:45 24 4
gpt4 key购买 nike

我正在尝试制作眼睛的白色部分:

但我不知道我做错了什么,也许这不是假设使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com