canvas學習筆記之繪製簡單路徑

繪製線段一般步驟:

moveTo(x,y) 移動畫筆到指定的座標點(x,y)

lineTo(x,y) 使用直線連接目前端點和指定的座標點(x,y)

stroke() 根據目前的畫線樣式，繪製目前或已經存在的路徑

繪製矩形路徑一般步驟:

rect(x, y, width, height) 矩形路徑，座標點(x,y)，width height寬高

stroke()或fill 根據目前的樣式，繪製或填滿路徑

也可使用前文提到的strokeRect或fillRect, 或是透過lineTo拼接成矩形

先看下繪製圓弧的api:

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x, y 圓弧中心， radius 圓弧半徑, startAngle 起始點, endAngle 圓弧終點, anticlockwise 預設為順時針, true逆時針

CSS中做旋轉用到都是角度（deg），但是arc函數中表示角的單位是弧度，不是角度。角度與弧度的js表達​​式: 弧度= (Math.PI/180) * 角度(deg)。

這裡弧度是以x軸正方向為基準、預設順時針旋轉的角度來計算

圖示：

(圖片來自沙漠)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx.closePath();ctx.stroke();ctx.fill();

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。