從上個星期開始，耳朵就一直在生病，裡面長了個疙瘩，腫的一碰就疼，不能吃飯不能嗨 (┳＿┳)……在此提醒各位小伙伴，最近天氣炎熱，一定要註意防暑上火，病來如山倒呀~ 接下來我正在喝著5塊一顆的藥學習canvas…… canvas（畫布）是html5新增的標簽元素，用來定義圖形，比如圖表和其他圖像。<c ...
從上個星期開始，耳朵就一直在生病，裡面長了個疙瘩，腫的一碰就疼，不能吃飯不能嗨 (┳＿┳)……在此提醒各位小伙伴，最近天氣炎熱，一定要註意防暑上火，病來如山倒呀~
接下來我正在喝著5塊一顆的藥學習canvas……
canvas（畫布）是html5新增的標簽元素，用來定義圖形，比如圖表和其他圖像。<canvas>標簽只是圖形容器，必須使用腳本（通常為javascript）來繪製圖形。
canvas與svg的區別
canvas是HTML5提供的新元素<canvas>，而svg存在的歷史要比canvas久遠，已經有十幾年了。svg並不是html5專有的標簽，最初svg是用xml技術（超文本擴展語言，可以自定義標簽或屬性）描述二維圖形的語言。
首先，從它們的功能上來講，canvas可以看做是一個畫布。其繪製出來的圖形為標量圖，因此，可以在canvas中引入jpg或png這類格式的圖片，在實際開發中，大型的網路游戲都是用canvas畫布做出來的，並且canvas的技術現在已經相當的成熟。
另外，我們喜歡用canvas來做一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪製的圖形為矢量圖，所以其用法上受到了限制。因為只能繪製矢量圖，所以svg中不能引入普通的圖片，因為矢量圖的不會失真的效果，在項目中我們會用來做一些動態的小圖標。
但是由於其本質為矢量圖，可以被無限放大而不會失真，這很適合被用來做地圖，而百度地圖就是用svg技術做出來的。
另外從技術發麵來講canvas裡面繪製的圖形不能被引擎抓取，如我們要讓canvas裡面的一個圖片跟隨滑鼠事件：canvas.onmouseover=function(){}。而svg裡面的圖形可以被引擎抓取，支持事件的綁定。
另外canvas中我們繪製圖形通常是通過JavaScript來實現，svg更多的是通過標簽來來實現，如在svg中繪製正矩形形就要用<rect>，這裡我們不能用屬性style="width:XXX;height:XXX;"來定義。
我再來介紹一個svg的js庫：TWO.JS。其中包含two.js和three.js前者用於繪製二維圖形，後者用於繪製三維圖形。TWO.JS可以支持三種格式，svg（預設）、canvas、和WEBGL。當然也可以在普通div中引入。
要從同一圖形的一個<canvas>標記中移除元素，需要擦掉重新繪製；而svg很容易編輯，只要從其描述中移除元素即可。
以上是之前在別人博客中看到的，所以先引用過來，待之後熟練掌握canvas，svg再寫自己的心得體會。
具體請參考 http://blog.csdn.net/helloword_chen/article/details/49788309
|
1、基本語法
<canvas id="canvasMain" width="800" height="600" > 您的瀏覽器不支持canvas </canvas>
當沒有設置寬度和高度的時候，canvas會初始化寬度為300px和高度為150px；當瀏覽器不支持canvas標簽的時候，會顯示其中的文字。
在canvas坐標體系中，以左上角為坐標原點，向右為x軸正方向，向下為y軸正方向，如下圖：
進行繪製需要獲取canvas的上下文環境context，之後調用API進行圖像繪製
var canvas = document.getElementById("canvasMain"),
ctx = canvas.getContext("2d");
替換內容是在不支持<canvas>標簽的瀏覽器中展示的。也可以通過檢測getContext()方法的存在來判斷是否支持（有些瀏覽器會為html規範之外的元素創建預設的html元素對象）
var canvas = document.getElementById("canvasMain");
if(canvas.getContext("2d")) {
var ctx = canvas.getContext("2d");
// drawing code here
} else {
// canvas-unsupported code here
}
導出在<canvas>元素上繪製的圖像，接收一個參數，即圖像的MIME類型格式。若繪製到畫布上的圖像來自不同域，該方法會報錯
var canvas = document.getElementById("canvasMain"); if(canvas.getContext) { //取得圖像的數據URI var imgURI = canvas.toDataURL('image/png'); //顯示圖像 var image = document.createElement('img'); image.src = imgURI; document.body.appendChild(image); }
2、2D上下文
- 填充和描邊
填充：用指定的樣式（顏色、漸變、圖像）填充圖形；描邊：在圖形的邊緣畫線 兩個屬性分別是fillStyle strokeStyle，屬性的值可以是字元串、漸變對象或模式對象
- 繪製矩形
繪製矩形方法：fillRect() strokeRect() clearRect() 參數依次為：矩形x坐標、y坐標、寬度、高度
var drawing = document.getElementById('drawing'); if(drawing.getContext) { var context = drawing.getContext('2d'); context.strokeStyle = 'rgba(0, 0, 255, 0.5)';//描邊屬性 context.fillStyle = 'pink';//填充屬性 context.lineWidth = 3; //描邊線條寬度 context.lineCap = 'square';//線條末端形狀（butt平頭、round圓頭、square方頭） context.lineJoin = 'round';//線條相交的方式（round圓交、bevel斜交、miter斜接） context.fillRect(10, 10, 50, 50);//填充矩形 context.fillStyle = 'green'; context.fillRect(30, 30, 50, 50); context.strokeRect(100, 10, 50, 50);//描邊矩形 context.clearRect(40, 40, 15, 15);//清除畫布上的矩形區域 }
- 繪製路徑
closePath()繪製一條連接到路徑起點的線條
fill()填充路徑 stroke()描邊路徑 clip()在路徑上創建一個剪切區域
isPointInPath(x,y)判斷畫布上的某一點是否位於路徑上
var drawing = document.getElementById('drawing'); if(drawing.getContext) { /*繪製路徑*/ var context = drawing.getContext('2d'); context.strokeStyle = 'pink'; context.beginPath();//開始繪製新路徑 //繪製外圓 context.arc(100, 100, 99, 0, 2*Math.PI, false);//參數依次為圓心坐標x、y、半徑、起始角度(用弧度表示)、結束角度、起始角度是否按逆時針方向計算（flase為順時針） context.moveTo(194, 100);//將繪圖游標移動到（x,y）,不畫線 //繪製內圓 context.arc(100, 100, 94, 0, 2*Math.PI, false); //繪製分針 context.moveTo(100, 100); context.lineTo(100, 25);//從上一點開始繪製一條直線，到（x,y）為止 //繪製時針 context.moveTo(100, 100); context.lineTo(35, 100); //繪製文本 context.font = 'bold 14px Arial';//表示文本樣式、大小、字體 context.textAlign = 'center';//文本對齊方式（start、end、left、right、center）,建議用start、end代替left、right context.textBaseline = 'middle';//文本的基線(top、hanging、middle、alphabetical、ideopgraphic、bottom) context.fillText('12', 100, 20); //描邊路徑 context.stroke(); //額外練習 context.moveTo(230, 10); //arcTo(x1,y1,x2,y2,radius):從上一點開始繪製一條弧線，到(x2,y2)為止，並以給定的半徑穿過（x1,y1） context.arcTo(280, 60, 330, 10, 50); //bezierCurveTo(c1x,c1y,c2x,c2y,x,y):從上一點開始繪製一條曲線，到(x,y)為止，並以(c1x,c1y)(c2x,c2y)為控制點 context.bezierCurveTo(210, 70, 290, 90, 300, 100); context.moveTo(320, 10); //quadraticCurveTo(cx,cy,x,y):從上一點開始繪製一條二次曲線，到(x,y)為止，並以(cx,cy)為控制點 context.quadraticCurveTo(420, 100, 400, 10); //rect(x,y,width,height):從點(x,y)開始繪製矩形，此方法繪製的是矩形路徑而不是獨立的形狀 context.rect(450, 10, 50, 50); context.stroke(); }
- 繪製文本
fillText()繪製文本 strokeText()為文本描邊 參數：文本字元串、x坐標、y坐標、可選的最大像素寬度
- 變換
var drawing = document.getElementById('drawing'); if(drawing.getContext) { //變換 var context = drawing.getContext('2d'); context.strokeStyle = 'rgba(0, 0, 255, 0.5)'; 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);//圍繞原點旋轉圖像angle弧度 //繪製分針 context.moveTo(0, 0); context.lineTo(0, -80); //繪製時針 context.moveTo(0, 0); context.lineTo(-65, 0); context.stroke(); context.rotate(-1); context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.save();//保存上下文狀態，只保存繪圖上下文的設置和變換，不會保存繪圖上下文的內容 context.fillStyle = 'pink'; context.translate(-100, -100); context.save(); context.fillStyle = 'green'; context.fillRect(220, 10, 50, 50); context.restore();//返回之前保存的設置 context.fillRect(280, 10, 50, 50); context.restore(); context.fillRect(340, 10, 50, 50); }
- 繪製圖像
drawImage()還可傳入<canvas>元素作為第一個參數，表示把另一個畫布內容繪製到當前畫布上。
可能遇到的問題：drawImage()圖片不顯示在畫布上，原因可能是你取圖片的時候，此時圖片還沒有載入出來
window.onload = function(){ var drawing = document.getElementById('drawing'); if(drawing.getContext) { //圖像 var context = drawing.getContext('2d'); var image = document.images[0]; //參數依次表示為：圖像元素、源圖像x坐標、y坐標、目標的寬度、高度 context.drawImage(image, 0, 0, 150, 250); //參數依次表示為：圖像元素、源圖像x坐標、y坐標、源圖像寬度、高度、目標圖像x坐標、y坐標、目標圖像寬度、高度 context.drawImage(image, 100, 300, 500, 600, 0, 0, 70, 80); } };
- 陰影、漸變、模式
模式與漸變一樣，都是從畫布原點（0,0）開始的，將填充樣式設置為模式對象，只表示在某個特定區域內顯示重覆的圖像，而不是從某個位置開始繪製重覆的圖像。
createPattern（）第一個參數也可以是<video>元素，或者是另一個<canvas>元素
window.onload = function(){ var drawing = document.getElementById('drawing'); if(drawing.getContext) { //陰影 var context = drawing.getContext('2d'); context.shadowColor = 'rgba(0, 0, 0, 0.5)';//陰影顏色，預設黑色 context.shadowOffsetX = 5;//x軸方向的陰影偏移量，預設0 context.shadowOffsetY = 5;//y軸方向的陰影偏移量，預設0 context.shadowBlur = 4;//模糊的像素數，預設0 context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.fillRect(10, 10, 50, 50); context.fillStyle = 'pink'; context.fillRect(30, 30, 50, 50); //漸變 var gradient = context.createLinearGradient(100, 10, 130, 130);//創建線性漸變，返回CanvasGradient對象的實例。參數：起點x坐標、y坐標、終點x坐標、y坐標 gradient.addColorStop(0, 'white');//指定色標，參數：色標位置（0到1之間的數字，0表示開始的顏色，1為結束的顏色）、css顏色值 gradient.addColorStop(1, 'black'); context.fillStyle = gradient; context.fillRect(100, 10, 50, 50); var createLinearGradient = function(context, x, y, width, height) { return context.createLinearGradient(x, y, x+width, y+height); }; var gradientNew = createLinearGradient(context, 180, 10, 50, 50); gradientNew.addColorStop(0, 'red'); gradientNew.addColorStop(1, 'green'); context.fillStyle = gradientNew; context.fillRect(180, 10, 50, 50); var gradientRound = context.createRadialGradient(275, 35, 10, 275, 35, 30);//徑向漸變,參數：起點圓的圓心、半徑，終點圓的圓心、半徑 gradientRound.addColorStop(0, 'pink'); gradientRound.addColorStop(1, 'blue'); context.fillStyle = gradientRound; context.fillRect(250, 10, 50, 50); //模式，即重覆的圖像，可以用來填充或描邊圖形 var image = document.images[0], pattern = context.createPattern(image, 'repeat-x');//創建新模式，參數：圖像元素、是否重覆（repeat、repeat-x、repeat-y、no-repeat） context.fillStyle = pattern; context.fillRect(350, 10, 350, 350); } }
- 使用圖像數據
getImageData()可取得原始圖像數據，參數：要取得數據的畫面區域的x坐標、y坐標、寬度、高度。返回的對象是ImageData的實例，該對象有3個屬性：width、height和data。其中data為數組，保存著圖像中
每一個像素的數據，每一個像素用4個元素來表示，分別表示紅、綠、藍和透明度值。因此，第一個像素的數據保存在數組的第0到第3個元素中。
註意：只有在畫布“乾凈”的情況下（即圖像並非來自其他域），才可以取得圖像數據。
- 合成
globalAlpha：介於0和1之間的值（包括0和1），用於指定透明度，預設為0。
globalComositionOperation：表示後繪製的圖形怎樣與先繪製的圖形結合。
3、WebGL
WebGL是針對canvas的3D上下文，並不是由W3C制定的標準。
本文持續更新中~
