HTML5 canvas標籤詳解

轉載：

<canvas>是html5當中的一個標籤，經過Javascript來畫圖。

<canvas id=」canvas」 width=」150″ height=」150″></canvas>

<script>

var canvas = document.getElementById(」canvas」);

var ctx = canvas.getContext(」2d」);

ctx.fillStyle = 「rgb(0,0,200)」;

ctx.fillRect(10, 10, 50, 50);

</script>

畫圖形

這是canvas的網格，剛纔的圖形，x=10,y=10, width=150, height=150

不像svg, canvas僅支持一種圖形-矩形，全部其它複雜的圖形都是經過一些函數來組成的。

畫矩形

fillRect(x,y,width,height) : 畫一個填充的矩形
strokeRect(x,y,width,height) : 爲一個矩形描邊
clearRect(x,y,width,height) : 清楚一個矩形的一部分而且設爲透明

rect(x, y, width, height)
直接畫矩形，當調用rect方法時moveTo會直接定位到(0,0)位置

畫路徑

beginPath() 建立路徑的第一步是調用beginPath方法，返回一個存儲路徑的信息
closePath() 從當前的點到起始點閉合路徑
stroke()描邊路徑
fill()填充路徑
lineTo(x, y) 從上一個起點到(x,y)的點畫線，上一個起點能夠經過moveTo來指定，默認爲原先路徑的終點

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();畫弧線

arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x,y)是圓弧的圓心，radius-半徑, startAngle和endAngle是圓弧的開始和結束弧度（radians = (Math.PI/180)*degree)，anticlockwise爲true的話是逆時針，不然爲順時針

二次方曲線以及貝塞爾曲線

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(cp1x, cp1y),(cp2x,cp2y)是曲線的控制點（紅點），(x,y)是曲線的終點

使用圖像

drawImage(image, x, y)image-圖像對象

function draw() {
var ctx = document.getElementById(’canvas’).getContext(’2d’);
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = ‘images/backdrop.png’;
}

drawImage(image, x, y, width, height)width和height是目標canvas上圖像的寬高
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

image參數與前面同樣，後面的四個參數是截取的參數，再後面的四個參數是目標canvas圖像的位置以及寬高

應用樣式和顏色

fillStyle = color 設置填充色
strokeStyle = color 設置描邊色
color能夠是css顏色值，一個漸變對象或一個模式對象

線條樣式
lineWidth = value 線條寬度

lineCap = type 線條的端點類型能夠是butt(默認),round和square

lineJoin = type 鏈接線的類型：round,bevel和miter(默認)

miterLimit = value 當設置miter時的選項

漸變

經過下面兩個方法建立一個canvasGradient對象, 就能夠把這個對象應用於fillStyle和strokeStyle屬性了

createLinearGradient(x1,y1,x2,y2) （x1,y1)到(x2,y2)的漸變
createRadialGradient(x1,y1,r1,x2,y2,r2) (x1,y1,r1)的圓到(x2,y2,r2)的圓

addColorStop(position, color) 爲canvasGradient對象添加顏色，position-[0,1]區間的值，表明添加顏色的位置，color-添加的顏色(如#fff, rgba(0,0,0,1)等）

模式

createPattern(image,type) image-Image對象，type:repeat,repeat-x, repeat-y, no-repeat 能夠講其應用與fillStyle或strokeStyle屬性

陰影

shadowOffsetX = float 陰影x偏移
shadowOffsetY = float 陰影y偏移
shadowBlur = float 模糊度
shadowColor = color 陰影顏色

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 5, 30);變換

保存和恢復
save() Cavas狀態被存儲在棧中，當調用save，當前的畫圖狀態將被保存的棧中
restore() 調用restore最後一次存儲的狀態會被恢復
轉移
translate(x, y) 移動canvas座標

旋轉
rotate(angle) angle是旋轉的角度，旋轉的中心是canvas座標原點，能夠經過translate來移動canvas的座標

縮放
scale(x, y) x是水平方向的縮放因子，y是垂直方向的縮放因子，必須都爲正數
變換
transform(m11, m12, m21, m22, dx, dy)
setTransform(m11, m12, m21, m22, dx, dy)

組合

globalCompositeOperation = type 設置不一樣形狀的組合類型
type:(方的圖形是已經存在的canvas內容，圓的圖形是新的形狀)
source-over(默認) – 在canvas內容上面畫新的形狀

destination-over

source-in

destination-in

source-out

destination-out

source-atop

destination-atop

lighter

darker

xor

copy

剪切路徑

clip()

基本動畫

基本的動畫步驟： 1.清除canvas – clearRect 2.保存canvas狀態 – save 3.畫要作動畫的形狀 4.恢復canvas狀態 – 若是你已經保存了狀態，在畫新的幀以前回復它 控制動畫 setInterval(animateShape,500); setTimeout(animateShape,500);

var img = new Image(); //User Variables img.src = 'Capitan_Meadows,_Yosemite_National_Park.jpg'; var CanvasXSize = 800; var CanvasYSize = 200; var speed = 30; //lower is faster var scale = 1.05; var y = -4.5; //vertical offset //End User Variables var dx = 0.75; var imgW = img.width*scale; var imgH = img.height*scale; var x = 0; if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas var clearX var clearY if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas else { clearX = CanvasXSize; } if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas else { clearY = CanvasYSize; } var ctx; function init() {     //Get Canvas Element     ctx = document.getElementById('canvas').getContext('2d');     //Set Refresh Rate     return setInterval(draw, speed); } function draw() {     //Clear Canvas     ctx.clearRect(0,0,clearX,clearY);     //If image is <= Canvas Size     if (imgW <= CanvasXSize) {         //reset, start from beginning         if (x > (CanvasXSize)) { x = 0; }         //draw aditional image         if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }     }     //If image is > Canvas Size     else {         //reset, start from beginning         if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }         //draw aditional image         if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }     }     //draw image     ctx.drawImage(img,x,y,imgW,imgH);     //amount to move     x += dx; } <body onload="init();"> <canvas id="canvas" width="800" height="200"></canvas>