var canvas = document.
queryselector
('#canvas');
var context = canvas.
getcontext
('2d');
// 之後的方法呼叫都是基於context
context.beginpath()：開啟一條新的路徑。
不一定要與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位置 ...