canvas是html5的新標籤，一般稱為「畫布」，通過js**在這個「畫布」上製作各種各樣的圖形、絢麗的效果等等。現在開始一步一步了解canvas：
首先，需要在html中新增乙個,一般來說，我們可以在canvas標籤內新增其他元素，對於不相容canvas的瀏覽器，就會把canvas標籤內當元素呈現出來，而相容的瀏覽器，則會忽略canvas標籤內部的元素。在這裡需要說明一下，canvas標籤可以設定寬高，但它是inline標籤！！！
好了，現在頁面上就存在乙個預設寬高但canvas元素了（300*150），那該怎麼操作canvas繪圖呢？剛才已經說過，這個「畫布」是通過js來控制的，包括裡面的圖形、動畫等等，那下一步就需要獲取了：
var firstcan = document.getelementbyid('firstcanvas');現在拿到這個元素了,列印出來就是canvas這個標籤，那我們還需要獲取「畫布」：var ctx = firstcan.getcontext('2d')，以後的操作都是在 ctx 這個canvas物件上面。比如設定寬高（也可以直接在html中設定），ctx.widht = 500;ctx.height = 500;這就設定了乙個500*500的畫布，最基本的，來畫條直線：
ctx.moveto(100,100); moveto --> 相當於從新下筆的位置
ctx.lineto(200,200); lineto --> 相當於筆執行的目標位置（直線）
ctx.stroke(); storke --> 前面相當於規劃路線，這個相當於「畫」的動作的執行。
通過這簡單的3步，就畫出了一條直線，起點位置在（100，100）位置，在平面上確定乙個點的位置，就是通過橫座標和縱座標來確定，在canvas畫布上，畫布的左上角是座標軸的（0，0）位置，第乙個是x的值，第二個是y的值，向右（下）為正，上面寫的，就是起點在（100，100）位置，終點在（200，200）位置。開啟瀏覽器，會看到乙個黑色的線，這是因為沒有設定線條顏色，就是沒有選擇用什麼顏色的筆去畫，預設是黑色，那下面通過：ctx.strokestyle = 'color';設定顏色，color可以是red……、#111……、rgba（）這些寫法都支援。當然顏色設定需要在stroke繪製之前。那下面，可以畫乙個封閉的圖形：
ctx.moveto(100,100);
ctx.lineto(100,200);
ctx.lineto(200,200);
ctx.closepath(); closepath() --> 它的意思是使圖形封閉起來，這裡可以替換成 ctx.lineto(100,100),效果是一樣的。
ctx.strokestyle = 'red';
ctx.stroke();
好了，這就繪製出乙個三角形，stroke只是繪製一條線，還有乙個方法:fill();是填充顏色，預設也是黑色，通過fillstyle設定填充色。只要知道座標點，就可以通過moveto和lineto就可繪製各種由直線組成的圖形（圓形、貝塞爾曲線等複雜圖形另算），比如長方形：
ctx.moveto(100,100);
ctx.lineto(300,100);
ctx.lineto(300,200);
ctx.lineto(100,200);
ctx.closepath();
ctx.fillstyle = '#26d';
ctx.strokestyle = 'red'
ctx.fill(); 不管是填充還是畫線，都需要在後面執行fill()或者stroke(),這些方法就是最會的「畫」，之前的可以看作是「構思」
ctx.stroke();
這就繪製成乙個200*100的長方形，canvas為我們提供乙個簡單的方法實現長方形：
ctx.rect(startx,starty,endx,endy);ctx.stroke();這樣就繪製了乙個簡單的長方形，也可以通過上面提到的fillstyle來改變填充顏色、strokestyle來改變邊框顏色。也可以直接通過這些方法直接繪製有填充的長方形、直接線條繪製長方形，不用在後面加上stroke()：
ctx.fillrect(startx,starty,endx,endy);這句話就可以代替上面的好幾行**，這是填充乙個長方形，還有乙個就是線條描繪乙個長方形：ctx.strokerect(startx,starty,endx,endy)，同樣的，預設都是黑色。
接下來，畫乙個圓形：
ctx.arc(centerx,centery,radius,startangle,endangule,anticlockwise);centerx\y,是所畫圓形的中心點的座標，radius是半徑，startangle\endangle是弧度數（math.pi)，（0-math.pi*2)表示乙個完整的圓，最後乙個引數是boolean值，來說明是順時針方向還是逆時針方向（預設為順時針）。
如果上面繪製的圖形沒有清除，圖形會出現錯亂，因為canvas只提供了「一支畫筆」，當畫完乙個圖形當時候，或者在開始畫乙個新的圖形的時候，可以通過ctx.beginpath（）來告訴瀏覽器，這是從新開始畫另乙個圖形了。
注意：arc()函式中的角度單位是弧度，不是度數。角度與弧度的js表示式:radians=(math.pi/180)*degrees。
關於圓形（圓弧）的畫法還有乙個：arcto(x1,y1,x2,y2,radius)，一般配合兩條線來使用，是兩點之間用弧線過度的效果。
最後再簡單說一下貝塞爾曲線的畫法，想要畫出漂亮的貝塞爾曲線，需要合理的控制點的座標：
二次貝塞爾曲線：需要配合乙個起點座標（moveto）
ctx.quadraticcurveto(cpx,cpy,endx,endy)，cpx\y表示控制點的座標，endx\y表示貝塞爾曲線的終點，最後需要繪製（stroke）；
三次貝塞爾曲線：同樣需要給乙個起點座標
ctx.beziercurveto(cpx1,cpy1,cpx2,cpy2,endx,endy)，前面四個引數分別代表兩個控制點的座標，endx\y表示終點座標，最後需要繪製（stroke）；
我們在繪製出來的封閉的圖形上，還可以『分割』出乙個區域或多個區域：clip()，它也需要配合fillstyle和fillrect這類的函式。後面還有一些繪製方法，下次在記錄。
canvas學習筆記一
html5新增的canvas標籤可用來繪圖。今天開始學習了一點繪製基礎。一 繪製三角形 1 canvas繪圖是基於狀態的繪圖，也就是說應該先設定繪圖狀態，再呼叫函式進行繪製 2 座標系 canvas的左上角為原點，向右為x軸正方向，向下為y軸正方向 繪圖步驟 1 定義標籤 當前瀏覽器不支援canva...
Canvas 學習筆記（一）
一直沒有系統的去學習一下canvas，都是在用到的時候一邊google一邊使用，最近工作上的事情告一段落，就決定跟著mdn學習一下canvas。在學習之前，首先了解一下canvas的背景知識。以下內容引用自 mdn canvas，中文翻譯為畫布，canvas的出現為web開發者帶了新一輪的高潮，利用...
canvas學習筆記一
為了研究pixi庫，就順帶從頭到位學習下canvas吧 var webgl function catch e getcontext方法指定引數2d，表示該canvas物件用於生成2d圖案 即平面圖案 如果引數是3d，就表示用於生成3d影象 即立體圖案 這部分實際上單獨叫做webgl api 繪製路徑...