javascript - Canvas arcTo() 方法

标签 javascript html canvas html5-canvas

我正在玩 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/

相关文章:

javascript - 无法在我的 Canvas 上绘制任何内容

javascript - 从 child 的数量/类型/ Prop 中提取父组件配置

javascript - Create-React-App - 修改 serviceWorker 以轮询新更新?

javascript - 按F5(刷新)后如何运行函数?

javascript - 基于标签宽度的可扩展消息 div

javascript - 使用 Pixastic 组合效果/滤镜

javascript - 在 requirejs、backbonejs 中使用应用程序级持久化模型

javascript - 有没有办法动态改变图标的​​颜色?

javascript - 拥有多个可用的签名面板

javascript - 如何更改此 d3.js 图表