Canvas—直線、矩形和圓

直線

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

moveTo是移動，可以理解爲移動畫筆。lineTo則是從當前位置往指定位置畫一條直線。以上代碼的效果如下：

看起來沒啥問題，可是實際上，第一條直線被畫了兩次。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'blue';
cts.stroke();

若兩線是分別畫的，則應是一條紅色，一條藍色，若是後面的stroke方法將兩條線都畫了一遍，則兩條都是藍色。

原因是因爲moveTo、lineTo這些操作都是對內存的操作而並沒有繪製到屏幕上，調用stroke方法的時候才真正的被繪製，因此內存中保存着兩條線的路徑，因此在第二個stroke方法被調用時，第一條直線也被繪製了。

那怎麼解決這個問題呢？

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = 'red';
cts.stroke();

ctx.beginPath();    //引入beginPath方法
ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'blue';
cts.stroke();

僅需在第一個stroke方法之後調用beginPath方法即可。這個方法會清空之前保存在內存中的路徑。

矩形

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.strokeRect(100, 100, 150, 100);

儘管可以通過畫線的方式畫矩形，但調用strokeRect方法將會更爲方便。

該方法接受4個參數，前兩個是所要畫的矩形左上角的座標，後兩個則分別是矩形的寬和高。

圓

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.arc(300, 300, 100, 0, 2*Math.PI);
ctx.stroke();