Canvas入门范例06：context.arcTo()的用法

Canvas入门实例06：context.arcTo()的用法

该方法的使用方式如下：

function drawScreen(){        var context = theCanvas.getContext('2d');                //吹牛逼前先打草稿：画出几条网格        context.beginPath();        context.strokeStyle = 'blue';        context.lineWidth = 1;        context.moveTo(0, 60);        context.lineTo(500, 60);        context.moveTo(0, 80);        context.lineTo(500, 80);        context.moveTo(0, 100);        context.lineTo(500, 100);        context.moveTo(0, 160);        context.lineTo(500, 160);        context.moveTo(100, 0);        context.lineTo(100, 300);        context.moveTo(120, 0);        context.lineTo(120, 300);        context.moveTo(140, 0);        context.lineTo(140, 300);        context.moveTo(280, 0);        context.lineTo(280, 300);        context.moveTo(300, 0);        context.lineTo(300, 300);        context.moveTo(320, 0);        context.lineTo(320, 300);        context.stroke();        context.closePath();                context.beginPath();        context.strokeStyle = 'black';        context.lineWidth = 5;        //左图        context.moveTo(20, 60);        context.lineTo(100, 60);        context.arcTo(120, 60, 120, 80, 20);        context.lineTo(120, 160);        //右图        context.moveTo(200, 60);        context.lineTo(300, 80);        context.arcTo(320, 60, 320, 80, 20);        context.lineTo(320, 160);                context.stroke();        context.closePath();}
方法介绍里说的太抽象，其实，这个方法的关键是两条线：
? 1) 从当前path坐标点到(x1,y1)的联线；
? 2) 从(x1,y1)到(x2,y2)的联线；
确定了这两条线后，画出来的弧则是与这两条线分别相切的、指定半径的圆的一段。另外，除了这个弧，arcTo()方法还会将path坐标点到(x1,y1)连接起来。
?
?
?