canvas H5 新增標簽 很受歡迎 ！
<canvas>中間信息如果瀏覽器不支持就會顯示<canvas>
可通過css設置樣式
獲取上下文環境
<canvas width="300" height="300" id="drawing">中間信息如果瀏覽器不支持就會顯示</canvas>
var drawing=document.getElementById("drawing")
var context=getContext("2d")//3d還不完善（全文圍繞這個對象）
********************************************************************888
toDataURL（） 可以到處在canvas上繪制的圖像 接受一個參數 圖像的MIME類型的格式 例如png格式圖像
if(drawing.getContext){
var imgURL=drawing.toDataURL(image/png)
var img=document.createEment("img")
img.src=imgURL
document.body.appendChild(img)
}
默認瀏覽器都會將圖像轉為PNG格式（除非另行指定）
（如果繪制的圖像來之不同域）這個方法會拋出錯誤
繪制 填充 和描邊
繪制2d起始坐標（0,0,）
填充 fillStyle（） 和描邊 strokeStyle（） 默認值#000000
列子
context.strokeStyle="red" //所有設置描邊的都會是紅色邊
context.fillStyle=“blue” //所有填充的面都是藍色
除非重新設置 JS上的顏色都可以使用因為他是基于JS的
矩形
唯一一個可以直接在2d上下文繪制的形狀
fillRect（ ）填充的矩形 strokeRect（）描邊的矩形 clearRect（）清除矩形區域
例子
填充的矩形
context.fillstyle="#ff0000"
context.fillRect(10,10,50,50) //紅色矩形 （x，y ，寬，高）
context.fillstyle=rgba（0,0,0，.5）//透明矩形
描邊矩形同理 吧fill改成stroke就ok
線條控制
context.lineWidth=3 //線條粗細
context.lineCap=butt /round/square //線條末端的樣式
context.lineJoin=round/bevel /miter 兩個線條交叉的方式
繪制路徑
繪制路徑開始
beginPath（）//開始一條路徑
圓形 弧度
arc(x,y,半徑，開始角度 （30deg），結束角度，布爾值（逆時針還是相反）)xy這個點開始 默認 右邊平行的0deg開始畫
arcTo（x,y,x1,y2，半徑）從上一個點開始
bezierCurveTo(x,y,x2,y2,x3,y3)
畫線
lineTo(x,y) 從上一點開始畫到x，y這個點位置
moveTo()移動繪圖的點 不會畫線
quadraticCurveTo（cx,cy,x,y）
rect(x, y ,width,height)繪制矩形起始點位xy fillStyle（）繪制的是獨立的形狀
closePath（）會鏈接到路徑開始的點
fill() 路徑完成填充 fillStyle 的演示填充的 stroke（）同理
clip（）可以在路徑上創建一個剪切區域
繪制文本
fillText（"文本內容",x,y,width,height） strokeText()
context.font="500 24px 微軟雅黑"
context.textAlign=start end left center right
context.textbaseLine=
fillText("內容",x,y) 也可以渲染默認值 strokeText("內容",x,y)
