javascript - Canvas arcTo()方法

我在玩HTML5 canvas，我的书说

最新的浏览器支持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>

最佳答案

以下是一些伪代码，用于说明您发布的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/