我們知道html在h5出之前就僅僅只是一個標簽，一個標記，語義化並不強，后來新增的標簽如video,audio都是語義化更強（讓人一看就懂是什么東西，反正我是這么理解的，一個div不代表着什么），本身自帶功能的標簽（這個功能別問我怎么弄出來的，是瀏覽器自身內核渲染出來的），就一句話，這個標簽就有這樣的功能，當然需要定制化外觀或功能也可以自己寫。而畫布其實也一樣。簡單的理解就是一張布，一張一塵不染的布，等待各位奮筆揮毫。
畫布很簡單就是一個標簽<canvas></canvas>;
一、那首先畫布能干什么呢？
這里先說下自然界一切的圖形外觀其實都是由最最簡單的點線矩形三角等等基本的東西組成的，很多看似很復雜的圖形其實都是由這些基本圖形通過平移、旋轉、縮放等等實現的，h5也不例外。
h5的畫布能做的東西其實你可以想象成一只筆，而且這只筆只能畫幾個基本圖形，包括什么呢？
1、圓形，點，弧度
一個基本例子：cxt.arc(x,y,r,0,Math.PI*2,true);
對應的是這個圓的圓形x,y坐標,r半徑,起始角，結束角，順或逆時針，true是逆時針，起始角0度在X軸正方向。（詳細點可以看這個圖）
寫個簡單的例子：（畫一個最最簡單的圓）
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d"); //這部分后面說明，沒什么，畫布畫東西都需要的，設置基礎環境，跟我們基礎設施一樣，要打電話發短信得有基站，要坐地鐵得有軌道等等
cxt.fillStyle="#FF0000"; //填充的顏色
cxt.beginPath(); //開始畫，開始路徑
cxt.arc(70,18,15,0,Math.PI*2,true); //上面講的核心，設置圓的各項屬性，只有這里才是核心，其他都是沒啥意思的
cxt.closePath(); //關閉路徑，這些后面細說
cxt.fill(); //畫完的填充方式：fill很明顯就是充滿填滿，還有空心圓的cxt.strock();后面你會發現不少都會用到，這里就先說到這
2、矩形，填充
基本的形式：
空矩形：ctx.strokeRect(20,20,150,100);
被填充的矩形：cxt.fillRect(0,0,150,75);
沒什么好說的，無非就是矩形原點（記住了是左上角的點）坐標，長跟寬而已。
接下來重要的事情說三遍，核心、核心、核心。這里就僅僅是核心的那一句，其他的呵呵，我肯定不會告訴你上面有個很類似的了。
3、線條、路徑
基本的形式：
cxt.moveTo(10,10); //從哪個點移動
cxt.lineTo(150,50); //畫線到哪個點
cxt.lineTo(10,50);
cxt.stroke(); //實際的把線給畫出來，默認顏色是黑色，可以理解成一個play或是run,前面的只是定義，這個才是根據定義實實際際的畫出來。
上面這些都只是畫布核心，需要畫的圖形。
但是單獨只是把畫布選擇出來然后直接寫這些的話，是畫不出任何東西的，為什么呢？首先你沒有定義要在怎樣的環境下畫，即畫布本身，接下來還下指令讓畫布開始畫以及什么時候結束畫。
具體如下：
同樣以畫線條為例：
var c=document.getElementById("myCanvas"); //常規的js選擇，用jq也可以且更方便些，兼容性也好一些 var ctx=c.getContext("2d"); //把畫布設置成一個二維的環境，這里你可能會問是不是可以設置成3d，很遺憾，目前canvas還不可以 ctx.beginPath(); //開始畫了，這里雖然是開始路徑的意思，但無論畫弧畫線畫其他都是要的 ctx.moveTo(20,20); ctx.lineTo(20,100); //畫第2根線 ctx.lineTo(70,100); //畫第2根線，這里畫多少根線看你需求，你構思中需要畫幾根、怎么畫都在這。 ctx.strokeStyle="green"; //設置線條的顏色，這里設置屬性的后面再說
ctx.stroke(); //線條實際畫出來
4、漸變
首先漸變你可以理解成一個矩形，也可以理解成一個路徑，它的意思是從某種顏色（或是透明度，主要是顏色吧）漸漸的過渡到另一種顏色。
基本的形式： （一些是畫布基本設置，為了方便我就不分開了）
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");//吶，這是公共的，畫布要畫東西都需要這個，即設置畫布環境
cxt.createLinearGradient(0,0,175,50); //設置線性漸變
grd.addColorStop(0,"#FF0000"); //顏色1
grd.addColorStop(1,"#00FF00"); //顏色2
cxt.fillStyle=grd; //告訴畫布填充的類型
5、插入圖片
這個沒想到吧？呵呵，沒錯畫布不止是我們自己畫，也可以把別人已經畫好的引用到我們的畫里面，當然這個別人畫好的不是畫，是圖片，照片也是OK的，只要html能解析的圖片格式，都可以。
那具體是怎樣的格式呢？（跟上面的一樣，我把基本格式先貼一下）
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0); //這里說下，插入的圖片，放的x坐標，y坐標
這個呢？其實跟我們寫html引入網頁原理是一樣的，都只是引入一個鏈接，這個鏈接直指數據庫里某一張圖片。相信各位看到src都有種親切感吧= =
二、好了，畫布能干什么，基本都在上面了，接下來先做個小總結，我把各個核心屬性稍微總結一下：
cxt=c.getContext("2d"); 設置畫布為2d環境，目前還沒有3d，當然你也可以教教我3d的畫要怎么畫，美術不好= =
畫線：
moveTo(0,0)：從什么開始移動，開始畫線條
lineTo(x,y)：把線條要畫到哪里，這兩個基本都是成對出現的，但lineTo也有moveTo的屬性，就是當你用lineTo畫到終點時，這個終點也可以當成下個lineTo的起點，所以一個moveTo可以對應一個lineTo
畫圓：cxt.arc(x,y,r,0,Math.PI*2,true); 不細說了，觸類旁通
畫矩形：
空矩形：ctx.strokeRect(20,20,150,100);
被填充的矩形：cxt.fillRect(0,0,150,75);
畫漸變：
createLinearGradient(x,y,l,h): 定義線性漸變
grd.addColorStop(0,"#FF0000"); 漸變色
grd.addColorStop(1,"#00FF00");
插入圖：
var img=new Image(); img.src="flower.png";
drawImage(img,0,0)：畫布插入圖片
其他：
fillstyle：填充類型 可以是顏色也可以是漸變
填充方式：
ctx.stroke(); 空心填充，無論圓，矩形等等填充的都是空心的
ctx.fill(); 實心填充
畫布基礎環境：
var cxt=c.getContext("2d");設置畫布基礎環境為二維的。
三、啰嗦了這么多，沒有實干怎么行呢？嘿嘿，自己搗鼓了一個程序，叫做自由自在的小球球，具體代碼如下：最后啰嗦下，畫布各項屬性都是靠js代碼來設置的，主體就一個canvas標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvasDemo1</title> <style> html,body,canvas{margin:0;padding:0} body{overflow:hidden} </style> <script> window.onload=function(){ (function canvas1(){ var oCanvas=document.getElementsByTagName('canvas')[0]; var ctx=oCanvas.getContext('2d'); var colorArr=["#E08031","#199475","#99CC99","#09C","#096"]; var x,y,r,xr,yr,d; var loveArr=[]; var w=window.innerWidth; var h=window.innerHeight; oCanvas.width=w; oCanvas.height=h; function random(min,max){ return Math.random()*(max-min)+min; //數學上的random()是返回一個比例值 } function Love(){} Love.prototype={ init:function(){ //這4個是基礎定義，設置球初始坐標，初始大小及顏色 this.r=random(10,15); this.x=random(this.r,w-this.r); this.y=random(this.r,h-this.r); this.color=colorArr[Math.floor(random(0,5))]; //設置球移動的速率 this.xr=random(-5,5); this.yr=random(-5,5); }, draw:function(){ //畫布基本操作，這里是畫一個小球 ctx.beginPath(); ctx.arc(this.x,this.y,this.r,0,Math.PI*2); ctx.fillStyle=this.color; ctx.fill(); }, move:function(){ //小球移動 this.x+=this.xr; this.y+=this.yr; (this.x+this.r>=w||this.x-this.r<=0)?this.xr=-this.xr:null; //邊緣碰撞判定 (this.y+this.r>=h||this.y-this.r<=0)?this.yr=-this.yr:null; this.draw(); } }; function create(){ //畫小球 var bubble=new Love(); bubble.init(); bubble.draw(); loveArr.push(bubble);//把每個小球對象存進數組里面 } for(var i=0;i<50;i++){ //一次性畫50個，修改畫布上的小球數目也從這里效果修改 create(); } var time=setInterval(function(){ ctx.clearRect(0,0,w,h); //清空畫布 for(var i=0;i<loveArr.length;i++){ loveArr[i].move(); //把之前存進數組的小球對象數據一個個拿出了（遍歷），並做了一個預先設計好的位移 } },1000/60); oCanvas.onclick=function(){ clearInterval(time); } })(); } </script> </head> <body> <canvas></canvas> </body> </html>