画布坐标
的HTML画布是一个二维网格。
画布的左上角的坐标为(0,0)
在前面的章节中，你看到这个方法用于： fillRect(0,0,150,75) 。
这意味着：开始在左上角(0,0)并画出一个150x75像素的矩形。
实例坐标
将鼠标悬停在矩形下方看到它的X和Y坐标：
X
ÿ
画一条线
要画一条直线在画布上，请使用以下方法：
- moveTo( x,y ) -定义的行的起点
- lineTo( x,y ) -定义线的终点
要真正划清界线，你必须使用一个"ink"的方法，如stroke()
例
限定在位置的开始点(0,0)并且在位置上的结束点(200,100) 然后使用stroke()方法以实际划清界线：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); 试一试» 画一个圆
画圆在画布上，请使用以下方法：
- beginPath() -开始的路径
- arc(x,y,r,startangle,endangle) -创建一个弧/曲线。 要创建一个圆arc()设置起始角为0，结束角度为2 * Math.PI。 x和y参数定义的x和所述圆的中心的y坐标。 第r参数定义的圆的半径。
例
定义与一个圆arc()方法。 然后使用stroke()方法以实际绘制圆形：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); 试一试»