Canvas 是H5的一部分，允許腳本語言動態渲染影像。 Canvas 定義一個區域，可以由html屬性定義該區域的寬高，javascript程式碼可以存取該區域，透過一整套完整的繪圖功能（API）,在網頁上渲染動態效果圖。
二、Canvas 能做什麼遊戲：毫無疑問，遊戲在HTML5領域具有舉足輕重的地位。 HTML5在基於Web的圖像顯示方面比Flash更立體、更精巧。
圖表製作：圖表製作時常被人們忽略，但無論企業內部或企業間交流合作都離不開圖表。現在有些開發者使用HTML/CSS完成圖示製作。當然，使用SVG（可縮放向量圖形）來完成圖表製作也是非常好的方法。
字體設計：對於字體的自訂渲染將完全可以基於Web，使用HTML5技術進行實現。
圖形編輯器：圖形編輯器能夠100%基於Web實作。
其他可嵌入網站的內容：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，並且不需要任何插件。
三、Canvas基本用法1.使用<canvas>必須先設定其width和height屬性，指定可繪圖區域大小,只指定寬高不添加樣式或繪製圖像的話，在頁面中將看不到該元素。
<canvas id='draw' width='200px' height='200px'></canvas>
2.繪製圖像的話，我們首先要取到canvas並調用getContext()方法，然後傳入上下文名字（2D/3D）,2D有兩種基本繪圖操作|填充(fillStyle)|描邊(strokeStyle)|，這兩個屬性預設值為#000
var draw = document.getElementById('draw');//確認瀏覽器是否支援<canvas>元素if(draw.getContext){ var context = draw.getContext('2d'); //給context繪製紅色的邊框context.strokeStyle = '#f00'; //內部填滿大草原的顏色context.fillStyle = '#0f0';}3.使用toDataURL()方法，可以匯出<canvas>元素上繪製的圖像
var draw = document.getElementById('draw');if(draw.getContext){ //顯示映像，toDataURL()取得的是一串base64的字串var drawURL = draw.toDataURL('image/png') ; var image = document.createElement('img'); image.src = drawURL; document.body.appendChild(image); }4.繪製矩形，主要有三種方法，fillRect()為矩形填滿顏色、strokeRect()為矩形描邊、clearRect()清除矩形。這三個方法都接收4個參數x/y/w/h，矩形的左上角座標和寬高
var draw = document.getElementById('draw');//確認瀏覽器是否支援<canvas>元素if(draw.getContext){ var context = draw.getContext('2d'); //繪製紅色矩形,綠色描邊context.fillStyle = '#f00'; context.strokeStyle = '#0f0'; context.strokeRect(10,10,50,50); context.fillRect(10,10,50,50); //繪製綠色矩形,紅色描邊context.fillStyle = '#0f0'; context.strokeStyle = '# f00'; context.strokeRect(10,10,50,50); context.fillRect(10,10,50,50); //在兩個矩形重疊的地方清除一個小矩形context.clearRect(40,40,10,10);}5.繪製路徑，透過路徑可以創造出複雜的形狀和線條，要繪製路徑，首先要呼叫beginPath()方法，再透過以下方法來實際的繪製路徑
arc(x,y,radius,startAngle,endAngle,conterclockwise)
(x,y)圓心座標、radius半徑、(startAngle,endAngle)起始角度與終止角度、conterclockwise順時針(false)/逆時針(true)
moveTo(x,y) 將遊標移到(x,y)，不畫線。可以用來修改所謂的上一點座標*
arcTo(x1,y1,x2,y2,radius)
從上一點開始繪製一條曲線到(x2,y2),並且以給定的radius穿過(x1,y1)
lineTo(x,y) 從上一點開始畫出一條直線，到(x,y)
rect(x,y,width,height)
從(x,y)開始畫出一個矩形，寬高為width、height。這個方法繪製的是矩形路徑，而非strokeRect()和fillRect()所繪製的獨立的形狀
//接下來繪製一個不含數字的時脈var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); //開始路徑context.beginPath( ); //繪製外圓context.arc(100,100,99,0,2*Math.PI,false); //繪製內圓context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //繪製分針context.moveTo(100,100); context.lineTo(100,15) ; //繪製時針context.moveTo(100,100); context.lineTo(35,100); //描邊路徑context.stroke(); context.strokeStyle = '#f00'; }6 . 繪製文本，主要有兩個方法，fillText(),strokeText(),都接收四個參數|text(要繪製的文本)|x|y|最大像素寬度(可選)|，這兩個方法都已下列三個屬性為基礎
font文字樣式，大小，字體等
textAlign 文字對其方式|start|end|left|right|center|
textBaseline 文本的基線|top|hanging|middle|alphabetic|ideographic|bottom|
//在錶盤繪製12點context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('12',100,20);7 . 變換
rotate(angel) 圍繞原點旋轉影像angle弧度
scale(scaleX,scaleY) 縮放影像，x*scaleX,y*scaleY 預設1
translate(x,y) 將座標原點移到(x,y)
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //開始路徑context.beginPath(); //繪製外圓context.arc( 100,100,99,0,2*Math.PI,false); //繪製內圓context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //變換原點context.translate(100,100); //旋轉表針context.rotate( 1) //繪製分針context.moveTo(0,0); context.lineTo(0,-85); //繪製時針context.moveTo(0,0); context.lineTo(-65,0); //描邊路徑context.stroke(); context.strokeStyle = '#f00'; }8 . 繪製影像，drawImage()
var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);9個參數: 要繪製的圖像原始圖像|x|y|w|h| 目標圖像|x|y|w|h|
9 . 陰影和漸變
陰影主要是以下幾個屬性值
var context = draw.getContext('2d'); //設定陰影context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; 漸進式建立一個新的線性漸變createLinearGradient()方法，有四個參數|x1|y1|x2|y2|分別為起點的座標和終點的座標var gradient = context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,'#fff'); //0表示開始gradient.addColorStop(1,'#000'); //1表示結束//使用定義好的漸變屬性context.fillStyle = gradient; //填滿的時候放入漸變context.fillRect(30,30,50,50);建立一個放射漸變createRadialGradient(),六個參數|x1|y2|radius1|x2|y2|radius2|分別為第一個圓心和半徑第二個圓心和半徑，用法和線性漸變相同
10 . 使用影像數據，可以透過getImageData()取得原始影像數據。四個參數|x|y|w|h|。每個ImageData物件有三個屬性，width/height/data，data是一個數組，內部存每一個像素的資料,每個元素的值介於0-255之間
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, red = data[0], green = data[1], blue = data[2], alpha = data[3]; //實作一個灰色過濾器var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); var img = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //繪製原始影像context. drawImage(img,0,0,100,100); //取得影像資料imageData = context.getImageData(0,0,img.width,img.height); data = imageData.data; for(i=0,len=data.length;i<len;i+=4){ red = data[i] ; green = data[i+1]; blue = data[i+2]; alpha = data[i+3]; //計算rgb的平均值average = Math.floor((red+green+blue)/3); //設定顏色值data[i] = average; data[i+1] = average; data[i+2] = average; } imageData.data = data; //把資料繪製在畫布context.putImageData(imageData,0,0)}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。