（1）這是乙個畫布標籤，用於繪製圖形，在網頁中顯示是乙個矩形，沒有內容和邊框，通常放置canvas標籤的時候需要新增乙個id屬性，便於用js進行繪製時讀取該畫布。
（2）該元素可以設定長寬和邊框樣式，具體**如下：
注：canvas是完全沒有繪圖的工作，繪製的工作全部都交給js，canvas僅僅是乙個畫布而已。
用js畫任何東西的時候都要先加入這兩行**。
（1）var c = document.getelementbyid("mycanvas");//這時候canvas裡面的id就有用了，這是用js讀取canvas元素，就是相當於畫畫前最起碼有個畫布，不然亂塗亂畫這是不文明的。
（2）var cxt = c.getcontext("2d");//getcontext("2d")這是乙個html5的內建物件，擁有很多種畫圖的方法；相當於一本參考書，你有了畫布之後還要有一本參考書，這樣才能順利畫圖。
當準備好了畫布和一本參考書之後，就可以隨便畫，畫出你心裡所想的，這節奏真的不要太爽。
先畫乙個紅色矩形並填充顏色：
**如下：
您的瀏覽器不支援html5
**中有點東西是沒說過的，沒事，容老夫一一解說，如有不對多多指正.
（1）您的瀏覽器不支援html5這句話的意思好明顯嘛，就是假如你的html檔案在不支援canvas標籤的情況下就顯示這麼一段話。
（2）fillstyle，這個屬性按照我理解就是你自己想填充什麼東西，它可以是顏色，圖案，漸變。
（3）fillrect(x,y,width,height)，這方法定義了填充乙個矩形的x,y座標（這x,y座標是指矩形的左上角），然後width就是矩形的長度了，height就是矩形的高度了。
畫完圖形，就是要畫乙個線條，正所謂點線面，線也是很重要的
您的瀏覽器不支援html5
（1）畫畫之前還是不要忘了兩個必備的工作，畫布和書，也就是第一行和第二行**。
（2）moveto(x,y),意思是線段的起始座標，可以說是你想把線打算從什麼位置開始
（3）lineto(x,y)，意思就是線段的結束座標，可以說就是你這條線打算
（4）strokestyle，這個就是你畫一條線的樣式是什麼，例如線的顏色
（5）stroke()，這方法表示繪製線條，那你的線開始位置和結束位置都規劃好了，還等什麼，stroke一下畫出來吧，就是這麼簡單。
我是這樣理解的，當要畫的時候就是要stroke，而填充的就是fill。
（1）畫畫之前還是不要忘了兩個必備的工作，畫布和書，也就是第一行和第二行**。
（2）arc（x, y,r,start,stop,true/false）;x,y分別代表圓心的座標，start表示畫圓的開始的地方，stop表示畫圖圓停止的地方,true/false代表預設為false表示順時針畫圓，true代表逆時針畫圓
（3）最後還要記得規劃好之後，需要填充的話就寫下fillstyle，然後fill()，如果只是描邊的話就寫stroke()。
如：
cxt.fillstyle = "#f00";
cxt.arc(50,50,40,0,0.5*math.pi,false);
cxt.fill();
cxt.stroke();
（2）第一步我就不說了，大家都懂，直接跳到第二步，.font("size family")，設定字型的大小和樣式
（3）stroketext("text",x,y)，所需要描出的字和位置
cxt.font = "30px arial";
cxt.strokestyle = "#ff0";
cxt.stroketext("hello world",10,50);
（4）filltext("text",x,y)所需要填充的字和位置
cxt.font = "30px arial";
cxt.fillstyle = "#ff0";
cxt.filltext("hello world",10,50);
如果對線性漸變和徑向漸變不熟悉的話，可以先了解一下！
建立線性漸變，這個有點複雜，但是沒關係。
（2）直奔主題，var mygradient = cxt.createlineargradient(0,0,200,0);，建立線性漸變的開始座標和結束座標
（3）mygradient.addcolorstop(0,"#000");
mygradient.addcolorstop(1,"#fff");這是建立線性漸變開始的顏色和開始位置和結束顏色和結束位置。
（4）cxt.fillstyle = mygradient;
cxt.fillrect(50,50,170,100); 最後把這個設定好的線性漸變放入fillstyle裡面。最後填充乙個矩形。
建立徑向漸變，並用徑向漸變建立乙個圓，其實和線性漸變差不多！都是小case
（
（2）也是直奔主題，建立乙個徑向漸變,createradialgradient(starx,stary,starr,endx,endy,endr)。可以想象成開始那個圓的座標半徑和結束圓的座標半徑。
var mygradient = cxt.createradialgradient(0,0,200,0);
（3）mygradient.addcolorstop(0,"#000");
mygradient.addcolorstop(1,"#fff");和建立線性漸變一樣，建立線性漸變開始的顏色和開始位置和結束顏色和結束位置。
（4）餘下的操作就是填充漸變顏色，然後繪製乙個圓，最後填充cxt.fill()
cxt.fillstyle = mygradient;
cxt.arc(50,50,50,0,1.5*math.pi);
cxt.fill()
這些都是簡單的總結，如果想深入學習請檢視相關資料！
HTML5新增畫布元素canvas
canvas元素是乙個正常的html元素，相當於在頁面插入乙個畫布。在標記中設定寬 高屬性，在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性，在縮放畫布後，裡面內容也會縮放。預設情況下畫布是透明的，除非你在畫布上繪製了內容，否則是看不到它的。如果你想我證明畫布確實存在，就能看到乙個黑...
HTML5新元素之Canvas詳解（1）
元素定義 替代內容 很多不支援html5的瀏覽器，如果那些瀏覽器開啟含有標籤頁面，並不能顯示canvas內容，這裡可以加入替代內容，用以提示使用者公升級瀏覽器。提示內容直接作為元素內容寫在元素內 如下 你的瀏覽器不支援canvas，請公升級瀏覽器 注意 結束標籤是必須的 渲染上下文 建立的固定尺寸的...
HTML5新增的canvas元素技能之一
1 利用canvas元素建立畫布 1 建立畫布 指定canvas元素的三個屬性id width 寬度 height 高度 3 使用draw函式進行繪畫 在body元素中加入 nl ad draw canvas 屬性，呼叫指令碼檔案中的draw函式，canvas的基本語法如下 2 利用canvas元素...