1、canvas的預設樣式的寬度和高度是 300px * 150px
2、直接在canvas裡面寫內容的話，當瀏覽器不支援canvas的時候，就會顯示該內容
3、如果直接通過canvas的style去設定寬高的話，會導致內容被強行縮放，從而導致問題，所以要通過直接設定attr的width和 height去改變寬高
4、通過ctx = xx.getcontext("2d")來獲取繪製環境（xx是canvas該元素，並且2d必須是小寫） ==》可看做畫筆
5、canvas的座標軸，x軸向右是正數，y軸向下是整數
6、繪製直線的條件
（1）起點 （2）終點 （3）顏色 （4）寬度
<1>ctx.beginpath() 開始定義路徑
<2>ctx.closepath() 關閉前面定義的路徑
<3>ctx.moveto(x,y) 把canvas當前路徑的結束點移動到x,y對應的點
<4>ctx.lineto(x,y) 把canvas當前路徑的結束點連線到x,y對應的點
<5>ctx.fill()填充當前的路徑
<6>ctx.stroke()填充canvas當前路徑繪製邊框
<7>ctx.fillstyle = 符合顏色格式的字串值，表示使用純色填充/canvasgradient，表明使用漸變填充/canvaspattern，表明使用位圖填充
設定填充canvas路徑所使用的填充風格
<8>ctx.strokestyle = 符合顏色格式的字串值，表示使用純色填充/canvasgradient，表明使用漸變填充/canvaspattern，表明使用位圖填充
設定繪製canvas路徑填充的風格
<9>ctx.linewidth = 10設定筆觸線條的寬度
<10>ctx.linejoin = "bevel(斜角)|round(圓角)|miter(預設，尖角)";這個屬性需要結合xx.linewidth,用於線的交匯處
<11>ctx.linecap = "butt(預設，平)/round(圓)/square(方)" ,用於線條的兩端樣式
ps:(1) fillstyle、strokestyle、linejoin 、linewidth要放在fill()和stroke()前面
(2) canvas的繪圖過程（即填充與描邊）是非常消耗資源的，如果想節省系統資源提高效率，最好是繪製好所有路徑，再一次性填充或描邊圖形。
(3)繪製圖形的寬度為100的話，如果linewidth=10的話，總寬度是100+(10/2)*2
7、繪製矩形
<1>ctx.strokerect(float x,float y,float width,float height) 繪製乙個矩形邊框
<2>ctx.fillrect(float x,float y,float width,float height) 填充乙個矩形邊框
8、繪製字串
<1>ctx.filltext(string text, float x, float y, [float maxwidth]) 填充字串
<2>ctx.stroketext(string text, float x, float y, [float maxwidth]) 繪製字串邊框
<3>ctx.textalign = start、end、left、right、center字串水平對齊方式
<4>ctx.textbasealign = top、hanging、middle、alphabetic、idecgraphic、bottom 字串垂直對齊方式
9、繪製陰影
<1>ctx.shadowblur 設定陰影的模糊程度。該值是乙個浮點數，該數值越大，陰影的模糊程度也就越大。
<2>ctx.shadowcolor 設定陰影的顏色
<3>ctx.shadowoffsetx 設定陰影在x方向的偏移
<4>ctx.shadowoffsety 設定陰影在 y 方向的偏移
10、新增子路徑的方法
<1>ctx.arc(float x, float y, float radius(半徑), float startangle, float endangle, boolean counterclockwise(逆時針)) ===> math.pi = 180°
在當前路徑上新增一段貝塞爾曲線
(cpx1 和 cpy1 則是控制第乙個控制點的座標,cpx2 和 cpy2 則是控制第二個控制點的座標)
<4>ctx.quadraticcurveto(float cpx, float cpy,float x,float y)
向 canvas 當前路徑新增一段二次貝塞爾曲線
<5>rect(float x, float y,float width, float height)
向 canvas 的當前路徑上新增乙個矩形
11、繪製位圖
<1>ctx.drawimage(image, x, y)
<2>ctx.drawimage(image, x, y, w, h)
<3>ctx.drawimage(image, sx, sy , sw, sh, dx, dy, dw, dh)
該方法將會從 image 上「挖出」一塊繪製到畫布上。其中 sx, sy 兩個引數控制從原上的哪乙個位置開始挖去, sw， sh 兩個引數控制從原挖球的寬度和高度；dx, dy 兩個引數控制把挖取的繪製到畫布上的哪個位置，而 dw, dh 則控制對繪製進行縮放，繪製出來的寬度是 dw, 高度 dh
12、有時候1畫素的線條不是1畫素寬，好像要寬一些，模糊一些
這時候,在不很嚴謹的場合可以使用+0.5
13、線性漸變
<1>ctx.createlineargradient(12,y1,x2,y2) 建立線性漸變
<2>ctx.addcolorstop(位置，顏色) 往漸變裡面新增顏色，位置是0-1之間的數字，也可以是兩位小數
<3>最後把ctx.fillstyle = linear
14、圓形漸變
ctx.createradialgradient(x1, y1, r1, x2, y2, r2)
15、曲線
ctx.arc(圓心x,圓心y,半徑,開始的角度,結束的角度,是否逆時針)
16、transform實現位移、縮放、旋轉
ctx.transform(水平)
100、在 canvas 上使用路徑，可按照下面的步驟進行。
呼叫 canvasrenderingcontext2d 物件的 beginpath（）方法開始定義路徑。
呼叫canvasrenderingcontext2d 的各種方法新增子路徑。
呼叫canvasrenderingcontext2d 的 closepath 方法關閉路徑。
呼叫canvasrenderingcontext2d 的fill（）或 stroke（）方法來填充路徑或者繪製路徑邊框。
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位置 ...