返回到:Canvas API:CanvasRenderingContext2D
本节课,我们学习CanvasRenderingContext2D.arcTo()方法。
CanvasRenderingContext2D.arcTo()
是 Canvas 2D API 根据控制点和半径绘制圆弧路径,使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线,和控制点 1 与控制点 2 连接的直线,作为使用指定半径的圆的切线,画出两条切线之间的弧线路径。
语法
void ctx.arcTo(x1, y1, x2, y2, radius);
Parameters
x1
第一个控制点的 x 轴坐标。
y1
第一个控制点的 y 轴坐标。
x2
第二个控制点的 x 轴坐标。
y2
第二个控制点的 y 轴坐标。
radius
圆弧的半径。
示例
使用 arcTo
方法
这是一段绘制圆弧的简单的代码片段。基础点是蓝色的,两个控制点是红色的。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([])
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150,100,50,20,30);
ctx.stroke();
ctx.fillStyle = 'blue';
// base point
ctx.fillRect(150, 20, 10, 10);
ctx.fillStyle = 'red';
// control point one
ctx.fillRect(150, 100, 10, 10);
// control point two
ctx.fillRect(50, 20, 10, 10);
//
ctx.setLineDash([5,5])
ctx.moveTo(150, 20);
ctx.lineTo(150,100);
ctx.lineTo(50, 20);
ctx.stroke();
ctx.beginPath();
ctx.arc(120,38,30,0,2*Math.PI);
ctx.stroke();
尝试 arcTo
参数
修改下面的代码并在线查看 canvas 的变化:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CanvasRenderingContext2D.arcTo() | Web176教程www.web176.com</title> <meta name="robots" content="noindex, nofollow"> <style> body { padding: 0; margin: 0; } svg:not(:root) { display: block; } .playable-code { background-color: #f4f7f8; border: none; border-left: 6px solid #558abb; border-width: medium medium medium 6px; color: #4d4e53; height: 100px; width: 90%; padding: 10px 10px 0; } .playable-canvas { border: 1px solid #4d4e53; border-radius: 2px; } .playable-buttons { text-align: right; width: 90%; padding: 5px 10px 5px 26px; } </style> </head> <body> <canvas id="canvas" class="playable-canvas" height="200" width="400"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.setLineDash([]) ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150,100,50,20,30); ctx.stroke(); ctx.fillStyle = 'blue'; // base point ctx.fillRect(150, 20, 10, 10); ctx.fillStyle = 'red'; // control point one ctx.fillRect(150, 100, 10, 10); // control point two ctx.fillRect(50, 20, 10, 10); // ctx.setLineDash([5,5]) ctx.moveTo(150, 20); ctx.lineTo(150,100); ctx.lineTo(50, 20); ctx.stroke(); ctx.beginPath(); ctx.arc(120,38,30,0,2*Math.PI); ctx.stroke();</textarea> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </script> </body> </html>
返回到:Canvas API:CanvasRenderingContext2D
作者:terry,如若转载,请注明出处:https://www.web176.com/canvas_api/8030.html