个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我正在尝试制作眼睛的白色部分:
但我不知道我做错了什么，也许这不是假设使用 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
SVG specification 中的 ARCTO 与我们在 Canvas 中的有很大不同。我有一个用例，我将根据 SVG 规范获取数据，但我需要在 Canvas 上绘制它。 我试过这个，但我想我的
我有以下 QML 文件，它绘制一个绿色圆圈(通过 QML 矩形)并在圆圈上绘制一个黑色圆弧(通过 Canvas 和 arcTo)。圆的位置和半径取决于窗口的大小。对于大多数尺寸来说，这似乎工作得很好，
我正在处理一个图形编辑器的功能，我正在编辑圆弧，当形状是椭圆时，QPainterPath::arcTo 的行为并不像我预期的那样；当它是一个圆圈时，它按预期工作。 下面的两张图片显示了结果。在第一种情
我正在玩 HTML5 canvas，我的书上是这么说的 latest browser supports arcTo method and it has capabilities to remove a
所以我再次处理环形扇区，这不是我的强项。我可以在 Canvas 上很好地使用 .arc 方法，问题来自需要我的弧线成为路径的一部分。 例如: ctx.save(); ctx.arc(centerX
我正在尝试制作眼睛的白色部分: 但我不知道我做错了什么，也许这不是假设使用 arcTo，问题是我如何做眼 Angular ？ function main() { var c2d = docum
我正在尝试绘制一个带圆角的矩形。我有一个执行此操作的 javascript 路径，但 javascript arcTo 方法采用一个矩形(定义其椭圆形)，然后是一个设置扫描的参数。 但是，在 Andr
我有一个 List我希望能够添加到场景图形或绘制到 Canvas 。第一个很简单，因为我可以创建一个 Path 节点并将其添加到场景中。第二个需要来自 PathElement 的映射's to cal
我有 2 个点，由一条线连接，即起点和终点。 我想在它们之间绘制一条圆弧，但半径应该是动态的，具体取决于用户单击的位置。因此我有一个来自鼠标的第三个点，带有 XY 坐标。 如何绘制 ctx.arcTo
我想画出这样一条路径并填充它: 如果原点是坐标为 (x, y) 的红点。我应该在下面的三重点中写什么来绘制这条路径。我已经尝试了很多，但无法弄清楚 arcTo 是如何工作的。 path.mov
我正在制作一个我想用 JavaFX 制作的游戏的原型(prototype)。它需要角色/ Sprite 沿着弯曲的路径向前移动(基本上是向前跳跃到特定位置)。我尝试使用MoveTo(使用 Sprite
在以下代码中使用 arcTo 时出现错误，使用的是 Kinetic.js 5.1.0。 错误是'TypeError: context.arcTo is not a function' myshape
我已经成功地开始以 0 到 360 度的角度扫描，从而实现了一个动画绘图环。然而，当环的尾部以 360 度角与环的头部相遇时，所有绘图都消失了。 这是我在onDraw() 中的圆环代码
我在 Nexus 7 上运行我的代码，同时它仍然安装了 Android 4.3。然后我升级到 Android 4.4 并再次运行我的代码。以下是我对一个奇怪的 Canvas.drawArc()/Pat
我是一名优秀的程序员,十分优秀！