context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);
绘制具有给定半径的圆弧。圆弧在当前笔位置所形成的楔形内顺时针绘制,并给出两个点:Point1和Point2。
在圆弧之前会自动绘制一条连接当前笔位置和圆弧起点的线。
<!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(function(){ // 获取对canvas元素及其上下文的引用 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); // 论点 var pointX0=25; var pointY0=80; var pointX1=75; var pointY1=0; var pointX2=125; var pointY2=80; var radius=25; // A circular arc drawn using the "arcTo" command. The line is automatically drawn. ctx.beginPath(); ctx.moveTo(pointX0,pointY0); ctx.arcTo(pointX1, pointY1, pointX2, pointY2, radius); ctx.stroke(); }); // 结束window.onload </script> </head> <body> <canvas id="canvas" width=200 height=150></canvas> </body> </html>