Canvas學習筆記 Canvas常用API方法

var canvas = document.

queryselector
('#canvas');
var context = canvas.
getcontext
('2d');
// 之後的方法呼叫都是基於context

不一定要與closepath()配對，可以不關閉舊路徑直接開啟新路徑。

context.closepath()：關閉當前路徑。

如果使用此方法時圖形不是閉合的，那麼canvas會畫一條線段使圖形閉合。

context.moveto(x, y)：x與y代表路徑最開始的起點。

context.stroke()：將路徑的線真正的畫出來。

context.strokestyle：設定線段的顏色。

context.linewidth：設定線段的寬度。

context.fill()：填充顏色到路徑畫出的圖形中。

此方法相當於使用closepath()方法，然後再進行填充。

context.fillstyle： 設定填充的顏色。

context.arc(x, y, radius, startangle, endangle, anticlockwise)：畫乙個圓形。

x：圓心橫座標，

y：圓心縱座標，

radius：半徑長度，

startangle：圓弧的起點（單位為math.pi），

endangle：圓弧的終點（單位為math.pi），

anticlockwise：是否逆時針，預設為false

context.clearrect(x, y, width, height)：清除畫布

獲取canvas長度和寬度：context.canvas.width // context.canvas.height

canvas學習筆記

1 canvas 元素a 元素有乙個叫做 getcontext 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能，通過簡單的測試getcontext 方法的存在，指令碼可以檢查程式設計支援性var canvas document.getelementbyid tutorial if canvas....

canvas學習筆記

canvas是html5中的新功能，它是一塊，在你開闢的空間內部用 畫圖。而建立畫布和畫圖是需要一些步驟的 canvas是布 context是各種筆 先看乙個簡單的 瀏覽器不支援canvas 每乙個我們要進行的canvas操作都必須有獲取畫布，和獲取畫布內容的操作。然後還有乙個問題就是，我們要預防老...

canvas學習筆記

畫布相當於乙個img標籤，可以在畫布上繪製內容。畫布預設是透明的，所以可以放在另乙個元素上面繪製內容，乙個頁面上可以有多個畫布元素 1.請輸入 繪製畫布的前提需要在頁面上建立乙個canvas元素，然後使用js獲取到這個canvas元素 2.繪製矩形的方法 這邊的x，y分別為矩形在畫布上的x，y位置 ...