一、什么是Canvas
Canvas 是H5的一部分，允許腳本語言動態渲染圖像。Canvas定義一個區域，可以由html屬性定義該區域的寬高，JavaScript代碼可以訪問該區域，通過一整套完整的繪圖功能（API），在網頁上渲染動態效果圖。
二、Canvas能做什么
-
游戲：毫無疑問，游戲在HTML5領域具有舉足輕重的地位。HTML5在基於Web的圖像顯示方面比Flash更加立體、更加精巧。
-
圖表制作：圖表制作時常被人們忽略，但無論企業內部還是企業間交流合作都離不開圖表。現在一些開發者使用HTML/CSS完成圖標制作。當然，使用SVG（可縮放矢量圖形）來完成圖表制作也是非常好的方法。
-
字體設計：對於字體的自定義渲染將完全可以基於Web，使用HTML5技術進行實現。
-
圖形編輯器：圖形編輯器能夠100%基於Web實現。
-
其他可嵌入網站的內容：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，並且不需要任何插件。
三、Canvas基本用法
3.1 使用Canvas必須先設置其width、height屬性，指定可繪圖區域大小。不指定的情況默認大小 為300X150 背景透明。
<canvas id="myCanvas" style="width: 300px;height: 200px;border: 1px solid red;"></canvas>
3.2 繪制一個帶粉色的矩形框
繪制圖像的話，我們首先要取到canvas並調用getContext()方法，然后傳入上下文名字（2D/3D）,2D有兩種基本繪圖操作|填充(fillStyle)|描邊(strokeStyle)|，這兩個屬性默認值為#000。
<script >
//獲取canvas元素
var c=document.getElementById("myCanvas");
//創建ctx對象
var ctx=c.getContext("2d");
//fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。
//fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
3.3繪制路徑
3.3.1 beginPath():新建一條路徑，一旦創建成功，圖形繪制命令被指向到路徑上生成路徑
3.3.2 moveTo(x,y)：將畫筆移動到指定坐標，類似起點
3.3.3 lineTo(x,y) ：將畫筆移動到結束坐標，類似終點
3.3.4 closePath()：閉合路徑
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" style="border: 1px solid red;"></canvas> <script > var myCanvas=document.querySelector("#myCanvas"); myCanvas.width="500"; myCanvas.height="300"; var cxt=myCanvas.getContext("2d"); // moveTo(x,y) 定義線條開始坐標 // lineTo(x,y) 定義線條結束坐標 //畫三角形 cxt.moveTo(50,50); cxt.lineTo(250,100); cxt.lineTo(50,200); cxt.lineTo(50,50); //畫直線 cxt.moveTo(0,0); cxt.lineTo(500,300); cxt.moveTo(0,50); cxt.lineTo(400,300); cxt.strokeStyle="red"; cxt.lineWidth="5px"; cxt.lineCap="round"; cxt.stroke(); </script> </body> </html>
注：
lineCap=butt(線末端為方形) | round（線末端為圓形） | square（線末端為方形，但增加了一個寬度和線段相同，高度是線段厚度一半的區域）
lineJoin=round(拐角處扇形) | bevel（拐角處矩形） |miter（拐角處菱形）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="500px" height="500px"></canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('myCanvas'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 20; for (var i = 0; i < lineJoin.length; i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(50, 50 + i * 50); ctx.lineTo(100, 100 + i * 50); ctx.lineTo(150, 50 + i * 50); ctx.lineTo(200, 100 + i * 50); ctx.lineTo(250, 50 + i * 50); ctx.stroke(); } } draw(); </script> </body> </html>
3.4 畫圓
var myCanvas=document.querySelector("#myCanvas");
myCanvas.width="1000";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
//aarc(x,y,radius,startAngle,endAngle,conterclockwise)
// (x,y)圓心坐標、radius半徑、(startAngle,endAngle)起始角度和終止角度、conterclockwise順時針(false)/逆時針(true)
// cxt.closePath();決定路徑是否閉合
cxt.lineWidth="5";
cxt.strokeStyle="red";
for(var i=0;i<10;i++){
cxt.beginPath();
cxt.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
cxt.closePath();
cxt.stroke();
}
for(var i=0;i<10;i++){
cxt.beginPath();
cxt.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
cxt.stroke();
}
3.5 繪制文本
使用canvas繪制文本主要有以下幾個屬性和方法
font——定義字體，大小
textAlign——文本對齊方式
textBaseline——文本的基線（|top|hanging|middle|alphabetic|ideographic|bottom| ）
fillText（text（要繪制的文本）,x,y）——在canvas上繪制實心的文本
strokeText(text,x,y)——在canvas上繪制空心的文本
var myCanvas=document.querySelector("#myCanvas");
myCanvas.width="1000";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
cxt.font="30px Arial";
cxt.fillText("Hello World",20,50);
cxt.font="60px Arial";
cxt.strokeText("Hello World",20,150);
3.6 繪制圖像
canvas繪制圖像主要用drawImage(image,x,y)
var myCanvas=document.querySelector("#myCanvas"); myCanvas.width="1000"; myCanvas.height="300"; var cxt=myCanvas.getContext("2d"); var imgObj=new Image(); imgObj.src="img/pic4.jpg"//原圖像大小1000×1419 imgObj.onload=function(){ cxt.drawImage(this,0,0,200,300);//this即imgObj,200,300指改變圖片的大小 cxt.drawImage(this,220,0,200,300); }
3.7 漸變
線性漸變：createLinearGradient(x,y,x1,y1) - 創建線條漸變
var myCanvas=document.querySelector("#myCanvas");
myCanvas.width="1000";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
//矩形漸變 var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); //圓形漸變 var grd1=cxt.createLinearGradient(0,0,175,50); grd1.addColorStop(0,"#FF0000"); grd1.addColorStop(1,"#00FF00"); cxt.beginPath(); cxt.arc(105,160,50,0,Math.PI*2); cxt.fillStyle=grd1; cxt.fill(); cxt.closePath();
效果如下：
徑向漸變：createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變
var myCanvas=document.querySelector("#myCanvas");
myCanvas.width="1000";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
var grd=cxt.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); //矩形 cxt.fillStyle=grd; cxt.fillRect(10,10,150,80); //圓形 var rg1=cxt.createRadialGradient(310,61,1,310,111,100); rg1.addColorStop(0,"#fff"); rg1.addColorStop(1,"black"); cxt.beginPath(); cxt.arc(310,111,100,0,Math.PI*2); cxt.fillStyle=rg1; cxt.fill(); cxt.closePath();
效果如下：
addColorStop()方法指定顏色停止
3.8 狀態的保存和恢復
保存或者恢復 canvas 里的狀態 (填充，描邊，漸變，坐標位移,裁切)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="500px" height="500px"></canvas> <script type="text/javascript"> var ctx; function draw(){ var canvas = document.getElementById('myCanvas'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 150, 150); // 使用默認設置繪制一個矩形 ctx.save(); // 保存默認狀態 ctx.fillStyle = 'red' // 在原有配置基礎上對顏色做改變 ctx.fillRect(15, 15, 120, 120); // 使用新的設置繪制一個矩形 ctx.save(); // 保存當前狀態 ctx.fillStyle = '#FFF' // 再次改變顏色配置 ctx.fillRect(30, 30, 90, 90); // 使用新的配置繪制一個矩形 ctx.restore(); // 重新加載之前的顏色狀態 ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置繪制一個矩形 ctx.restore(); // 加載默認顏色配置 ctx.fillRect(60, 60, 30, 30); // 使用加載的配置繪制一個矩形 } draw(); </script> </body> </html>
3.9 變換
3.9.1 translate(x,y) 移動到指定位置
3.9.2 rotate（angle）順時針旋轉，以坐標原點為中心
3.9.3 scale(x,y) 增減圖形在 canvas 中的像素數目，對形狀，位圖進行縮小或者放大。參數x,y默認1，比1小的縮減，比1大的增倍
3.10 合成
globalCompositeOperation = type
var ctx; function draw(){ var canvas = document.getElementById('myCanvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 200);
ctx.globalCompositeOperation = "source-over"; //全局合成操作
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 200, 200);
}
draw();
注：藍舊紅新
3.10.1 默認source-over，新圖像覆蓋
3.10.2 source-in 僅僅會出現新圖像與原來圖像重疊的部分，其他區域都變成透明的。(包括其他的老圖像區域也會透明)
3.10.3 source-out 僅僅顯示新圖像與老圖像沒有重疊的部分，其余部分全部透明。(老圖像也不顯示)
3.10.4 source-top 新圖像僅僅顯示與老圖像重疊區域。老圖像仍然可以顯示。
3.10.5 destination-over 新圖像會在老圖像的下面。
3.10.6 destination-in 僅僅新老圖像重疊部分的老圖像被顯示，其他區域全部透明。
3.10.7 destination-out 僅僅老圖像與新圖像沒有重疊的部分。 注意顯示的是老圖像的部分區域。
3.10.8destination-atop 老圖像僅僅僅僅顯示重疊部分，新圖像會顯示在老圖像的下面。
3.10.9 lighter 新老圖像都顯示，但是重疊區域的顏色做處理
3.10.10 darken 新老圖像都顯示，重疊部分顯示最黑像素（每個顏色位進行比較，得到最小的)
3.10.11 lighten 保證重疊部分最量的像素。(每個顏色位進行比較，得到最大的)
3.10.12 xor 重疊部分為透明
3.10.13 copy 僅保留新圖像
關於canvas的基本用法就到這，后面會整一些小案例