在html5中我覺得最重要的就是引入了canvas，使得我們可以在web中繪制各種圖形。給人感覺單在這點上有點模糊我們web和桌面程式的感覺。在html5外web中也有基于xml的繪圖如：vml、svg。而canvas為基于像素的繪圖。canvas是一個相當于畫闆的html節點，我們必須以js操作繪圖。
如下：
<canvas id="mycanvas" width="600" height="300">你的浏覽器還不支援哦</canvas>定義。
我們可以擷取canvas對象為var c=document.getelementbyid("mycanvas");其應有js屬性方法如下列舉：
1：繪制渲染對象，c.getcontext("2d"),擷取2d繪圖對象，無論我們調用多少次擷取的對象都将是相同的對象。
2：繪制方法：
clecrrect(left,top,width,height)清除制定矩形區域，
fillrect(left,top,width,height)繪制矩形，并以fillstyle填充。
filltext（text,x,y）繪制文字；
strokerect(left,top,width,height)繪制矩形，以strokestyle繪制邊界。
beginpath():開啟路徑的繪制,重置path為初始狀态；
closepath():繪制路徑path結束，它會繪制一個閉合的區間，添加一條起始位置到目前坐标的閉合曲線；
moveto（x，y）：設定繪圖其實坐标。
lineto(x，y);繪制從目前其實位置到x，y直線。
fill（），stroke（），clip（）：在完成繪制的最後的填充和邊界輪廓，剪輯區域。
arc（）：繪制弧,圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小；
rect():矩形路徑;
drawimage（imag img）：繪制圖檔；
quadraticcurveto():二次樣條曲線路徑,參數兩個控制點；
beziercurveto（）：貝塞爾曲線，參數三個控制點；
createimagedata,getimagedata，putimagedata:為canvas中像素資料。imagedata為記錄width、height、和資料 data，其中data為我們色素的記錄為
argb，是以數組大小長度為width*height*4，順序分别為rgba。getimagedata為擷取矩形區域像素，而putimagedata則為設定矩形區域像素；
… and so on！
3：坐标變換：
translate（x,y）：平移變換，原點移動到坐标（x，y）；
rotate（a）：旋轉變換，旋轉a度角；
scale（x，y）：伸縮變換；
save（），restore（）：提供和一個堆棧，儲存和恢複繪圖狀态，save将目前繪圖狀态壓入堆棧，restore出棧，恢複繪圖狀态；
好了，也晚了。附我的測試代碼，：
<html>
<head>
</head>
<body>
<canvas id="mycanvas" width="600" height="300">你的浏覽器還不支援哦</canvas>
<script type="text/javascript">
var width,height,top,left;
width=height=100;
top=left=5;
var x=10;
var y=10;
var c=document.getelementbyid("mycanvas");
var maxwidth=c.width-5;
var maxheight=c.height-5;
var cxt=c.getcontext("2d");
cxt.strokestyle="#00f";
cxt.strokerect(0,0,c.width,c.height);
var img=new image();
img.src="1.gif";
var myinterval=null;
start();
function refresh(){
cxt.clearrect(left,top,width,height);
if((left+x)>(maxwidth-width)||left+x<0){
x=-x;
}
if((top+y)>(maxheight-height)||top+y<0){
y=-y;
left=left+x;
top=top+y;
cxt.drawimage(img,left,top,width,height);
cxt.font="20pt 宋體";
cxt.filltext("破狼",left,top+25);
function start(){
if(myinterval==null){
myinterval=setinterval("refresh()",100);
function stop(){
if(myinterval!=null){
clearinterval(myinterval);
myinterval=null;
function inrectangle(x,y,rectx,recty,rwidth,rheight){
return (x>=rectx&&x<=rectx+rwidth)&&(y>=recty&&y<=recty+rheight)
c.onmouseover=function(e){
if(inrectangle(e.clientx,e.clienty,left,top,width,height)){
stop();
c.onmouseout=function(e){
c.onmousemove=function(e){
}else{
</script>
</body>
</html>
我的html5系列：
<a href="http://www.cnblogs.com/whitewolf/archive/2011/02/28/1967456.html">html5聲頻audio和視訊video</a>
<a href="http://www.cnblogs.com/whitewolf/archive/2011/03/02/1968512.html">html5-canvas繪圖</a>
<a href="http://www.cnblogs.com/whitewolf/archive/2011/03/02/1969398.html" target="_blank">html5之canvas坐标變換應用-時鐘執行個體</a>
<a href="http://www.cnblogs.com/whitewolf/archive/2011/03/04/1970457.html" target="_blank">html5-web本地存儲</a>