畫布坐標
的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(); 試一試»