1、利用canvas元素建立畫布
（1）建立畫布：指定canvas元素的三個屬性id、width（寬度）、height（高度）
（3）使用draw函式進行繪畫：在body元素中加入οnlοad="draw('canvas')"屬性，呼叫指令碼檔案中的draw函式，canvas的基本語法如下：
2、利用canvas元素及js指令碼繪製矩形（下面步驟要放在乙個js檔案中）
（1）獲取canvas元素：利用document.getelementbyid()方法
（2）獲取圖形上下文物件（封裝了很多繪圖功能）：利用canvas物件的getcontext()方法，並傳入引數『2d』
（3）設定繪製樣式：利用上下文物件的fillstyle屬性設定填充顏色值，strokestyle屬性設定邊框顏色值
（4）設定顏色值：有多種方式①顏色名（black）②16進製表示法（#000000）③rgb（rgba(0,0,0)）
④rgba（rgba(0,0,0,1)）
（5）設定邊框寬度：利用上下文物件的linewidth屬性，可以設定任何直線的寬度
（6）繪製最終矩形：使用上下文物件的fillrect(x,y,width,height)來填充矩形，strokerect(x,y,width,height)來繪製矩形邊框，引數中的x,y分別表示矩形的起點橫座標和縱座標，座標原點是畫布的左上角，width、height分別表示矩形的寬度和高度，demo及呈現效果如下：
index.html檔案中的**：
canvas.js檔案中的**：
functiondraw(id){
var canvas=document.getelementbyid(id);
var context=canvas.getcontext('2d');
context.fillstyle='#000';//填充顏色為黑色
context.strokestyle='#f60';//邊框顏色為橙色
context.linewidth=5;
context.fillrect(0,0,400,300);//繪製填充矩形
context.strokerect(50,50,180,120);//繪製矩形邊框
效果圖：
HTML5新增畫布元素canvas
canvas元素是乙個正常的html元素，相當於在頁面插入乙個畫布。在標記中設定寬 高屬性，在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性，在縮放畫布後，裡面內容也會縮放。預設情況下畫布是透明的，除非你在畫布上繪製了內容，否則是看不到它的。如果你想我證明畫布確實存在，就能看到乙個黑...
HTML5新增的canvas元素技能之二
3 利用canvas元素及js指令碼繪製圓形 1 表明開始繪製新路徑 利用上下文物件的beginpath 方法 2 繪製圓形路徑 利用上下文物件的arc 方法，語法是 arc x,y,radius,startangle,endangle,anticlockwise 其中 x,y 是圓的圓心，radi...
HTML5新增的canvas元素技能之三
4 利用canvas元素及js指令碼繪製文字 1 設定文字的三個屬性 a 文字樣式font font weight font sizefont family 字型加粗 字型大小 字型型別 b 文字水平對齊方式textalign，屬性值有 start 預設值 end left right center...