画布 arcTo() 方法答案

【问题标题】：Canvas arcTo() method画布 arcTo() 方法
【发布时间】：2017-11-13 19:28:48
【问题描述】：

我正在玩 HTML5 画布，我的书说

最新的浏览器支持 arcTo 方法，它具有删除功能 arc() 函数。

我的问题是怎么做？

我也对 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>

【问题讨论】：

这里是doc

标签： javascript html canvas html5-canvas

【解决方案1】：

下面是一些伪代码，解释了您发布的 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 所做的完全相同的事情，尽管需要更多的工作，并且网上有很多这样的例子。

【讨论】：