javascript - Canvas arcTo() 方法-6ren

javascript - Canvas arcTo() 方法

转载作者：行者123 更新时间：2023-11-30 20:59:54

24

4

我正在玩 HTML5 canvas，我的书上是这么说的

latest browser supports arcTo method and it has capabilities to remove arc() function .

我的问题是如何？

我也对 arcTo 的这个例子感到困惑，为什么它以这种方式形成，有人可以解释

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <canvas id="canvas" width="500" height="500" ></canvas>
    
    <script>
    var canvas = document.getElementById("canvas");

    var context = canvas.getContext('2d');

      var drawScreen = function(){
      	context.moveTo(0,0);
      	context.lineTo(100,200);	
      	context.arcTo(350,350,100,100,20);
      	context.stroke();
      }
      
      drawScreen();
    </script>
  </body>

</html>

最佳答案

以下是一些伪代码，解释了您发布的 JavaScript 代码的工作原理:

1) Get the canvas, and store it to variable 'canvas'
2) Get the 2d context of 'canvas', and store it to variable 'context'

3) Initialize a function, 'drawScreen', that takes no arguments, but runs the following instructions:
   a) Move the pen to (0,0) on the canvas.
   b) Draw a line from the pen's current position to (100, 100)
   c) Draw an arc with a tangent line that passes through (350, 350) and the current pen position, and another tangent line that passes through (350, 350) and (100, 100), around a circle with radius 20.
   d) Push the updated canvas to the screen.
4) Run the function 'drawScreen'

信不信由你，您可以使用 arcTo 或其他命令的组合来完成 arc 所做的完全相同的事情，尽管需要更多的工作，并且有很多在线示例。

关于javascript - Canvas arcTo() 方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47239854/

24

4

0

文章推荐： c# - 修改新集合而不影响原始集合

文章推荐： c - memchr 返回意外字符

文章推荐： c - 如何处理函数声明中 C 参数名称(不带类型)的错误？

文章推荐： c# - 如何在运行时填写构造函数参数？

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

首页

博学

6Ren·AI

商城

javascript - Canvas arcTo() 方法