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