<span>Canavs arcTo方法的理解</span>

Canavs arcTo方法的理解

全栈程序员-用户IM • 2021年11月13日下午9:00 • 未分类

arcTo方法有四个參数

參数1,2为第一个控制点的x,y坐标,參数2为第二个控制点的坐标,參数3为绘制圆弧的半径.

起点和第一个控制点组成的延长线与第一个控制点和第二个控制点组成的延长线都是和圆弧相切的,这个圆弧也就是被夹在两条延长线中间.圆越大，两条延长线能形成的角度能夹住的圆弧就越小.

<span>Canavs arcTo方法的理解</span>

以下写了一个简单的动画帮助理解

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

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/119238.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...