標籤：style blog http color width 2014
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
