帆布包含arcTo()方法

帆布包含arcTo()方法

问题描述:

我玩HTML5画布,我的书上说帆布包含arcTo()方法

最新的浏览器支持包含arcTo方法,它有能力以去除 弧()函数。

我的问题是怎么回事?

我也很困惑与包含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(){ 
 
     \t context.moveTo(0,0); 
 
     \t context.lineTo(100,200); \t 
 
     \t context.arcTo(350,350,100,100,20); 
 
     \t context.stroke(); 
 
     } 
 
     
 
     drawScreen(); 
 
    </script> 
 
    </body> 
 

 
</html>

+0

这是[doc](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo) – Durga

这里是一些伪代码解释的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会做,尽管有更多的工作,并且有许多在线的例子。