Question

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

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

我的问题是怎么做的？

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

＆＃13;

<!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>

＆＃13;

Answer 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所做的完全相同的事情，虽然工作量很大，但网上有很多例子。< / p>

Canvas arcTo（）方法

1 个答案: