javascript - 如何使用 arcTo 制作眼睛
问题描述
我正在尝试制作眼睛的白色部分:
但我不知道我做错了什么,也许这不是假设使用 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>
解决方案
用 分别绘制上半部和下半部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>
推荐阅读
- html - DataTables 年龄范围过滤器不起作用
- database - 解析文本,然后搜索它:每个位置一个条目,而不是每个文本 1 个 JSON 列
- x86 - PCIE 64 字节单突发事务
- pandas - 如何通过 pandas.cut() 解决此类问题?
- user-interface - 将文本字段插入 Flutter 列时出错
- javascript - 角度可观察返回未定义的结果
- python - 在 Spyder 打开后,Crawler 没有在 django 视图中运行
- reactjs - 为什么渲染方法在类组件中运行两次而没有包含任何状态?
- php - 有没有办法将整个 url 作为变量传递给 onclick=window.open?
- java - tIECategory 表存在,但一直落入“其他”部分......任何代码错误或其他?