帆布包含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>
答
这里是一些伪代码解释的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
会做,尽管有更多的工作,并且有许多在线的例子。
这是[doc](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo) – Durga