arcTo方法有四个參数
參数1,2为第一个控制点的x,y坐标,參数2为第二个控制点的坐标,參数3为绘制圆弧的半径.
起点和第一个控制点组成的延长线与第一个控制点和第二个控制点组成的延长线都是和圆弧相切的,这个圆弧也就是被夹在两条延长线中间.圆越大，两条延长线能形成的角度能夹住的圆弧就越小.
以下写了一个简单的动画帮助理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
canvas {
width: 400px;
height: 400px;
background-color: #EEEEEE;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var arcToPoint1 = {x:120, y:40};
var arcToPoint2 = {x:60, y:80}
var context = canvas.getContext('2d');
if (!canvas || !canvas.getContext) {
return;
} else {
timer = setInterval(function(){
if (arcToPoint2.x < 150) {
arcTo (context, arcToPoint1, arcToPoint2);
arcToPoint2.x += 2;
} else {
clearInterval(timer);
}
}, 300);
}
}
function arcTo () {
var startPoint = {x: 20, y: 40};
var context = arguments[0];
var arcToPoint1 = arguments[1];
var arcToPoint2 = arguments[2];
var context = canvas.getContext('2d');
context.clearRect(0,0,context.canvas.width, context.canvas.height)
context.beginPath();
context.moveTo(startPoint.x, startPoint.y);
context.strokeStyle = "red";
context.lineWidth = 1;
context.arcTo(arcToPoint1.x, arcToPoint1.y, arcToPoint2.x, arcToPoint2.y, 40);
context.stroke();
context.beginPath();
context.moveTo(startPoint.x, startPoint.y);
context.strokeStyle = "black";
context.lineWidth = 1;
context.lineTo(arcToPoint1.x, arcToPoint1.y);
context.fillText('arcToPoint1', arcToPoint1.x + 10, arcToPoint1.y - 5)
context.stroke();
context.beginPath();
context.moveTo(arcToPoint1.x, arcToPoint1.y);
context.strokeStyle = "black";
context.lineWidth = 1;
context.lineTo(arcToPoint2.x, arcToPoint2.y);
context.fillText('arcToPoint2', arcToPoint2.x + 10, arcToPoint2.y + 10)
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas">
此游览器不支持canvas标签
</canvas>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/119238.html原文链接：https://javaforall.net
