H5新特性之canvas

canvas無疑是H5之中最受歡迎的新特性了，它可以讓瀏覽毫無費力的畫出各種圖案，動畫。

canvas的性能不會因為畫布上的圖案多少而改變，因此做動畫用canvas性能也相當優秀。

canvas最基本的概念是1.路徑 2.描邊 3.填充 4.變換 5.圖片操作

首先先獲得canvas的操作借口集（這里先用2d為例）：

let canvas = document.getElementById('canvas');
// canvas的所有畫圖接口都集成在gd這里了
let gd = canvas.getContext('2d');

1.路徑

常見的路徑操作有

//清除之前的路徑
gd.beginPath();

//移動點到x,y
gd.moveTo(x,y);

//線連到x,y
gd.lineTo(x,y);

//矩形“選區”(x,y為左上角的點，w,h分別為寬高)
gd.rect(x,y,w,h);

//圓弧“選區”
gd.arc(x,y,r,startArg,endArg,是否逆時針);

//閉合路徑
gd.closePath();

2.描邊

常見的描邊操作：

// 先設置好描邊的樣式
gd.strokeStyle = '任意CSS顏色';
gd.lineWidth = 3; // 邊寬3px
// 把上面的路徑描一次邊
gd.stroke();

//直接描矩形
gd.strokeRect(x,y,w,h);

//寫字 
gd.font = '30px 宋體';
gd.strokeText('內容~~',x,y);

 

3.填充

常見的填充操作：

//設置填充樣式
gd.fillStyle = '任意css樣式'；
//把上面的路徑自動閉合填充
gd.fill();

//直接填充矩形
gd.fillRect(x,y,w,h);

//填充字體
gd.font = '30px 宋體';
gd.fillText('內容',x,y);

 

4.變換

和CSS3的變換一樣。canvas的變換也有scale、translate、rotate

gd.translate(x,y) //圖形相對原來的位置移動多少

gd.rotate(Math.PI/2) //整個畫布相對與左上角，逆時針轉90°

gd.scale(x軸放大倍數,y軸放大倍數); //整個畫布左上角為原點，分別放大不同倍數

而變換前后要有save和restore來還原畫布的變換狀態

gd.save(); //先保存變換前畫布狀態
//。。。。變換1
//。。。。變換2
//。。。。變換n
gd.restore(); //還原變換后的畫布狀態

 

5.圖片操作

//填充圖片
let img = new Image();
img.src = 'url';
img.onload = function(){
    gd.drawImage(
        img, //或者是get一個img dom又或者createElement('img')
        sx,sy,sw,sh, //原圖的定位，大小
        dx,dy,dw,dh //在canvas的定位，大小
    )
}

//操作圖片像素

let data = gd.getImageData(x1,y1,x2,y2); //獲取從點1到點2之間的所有像素點的值，每個點都有r、g、b、a四個值，例如點1的值為data[0~3]

//對data數組一波操作之后，把數據放回畫布中
gd.putImageData(data,x1,x2); //把數據從點1這里開始放數據

 

ps:當然還有一個比較重要的操作

gd.clearRect(0,0,canvas.width,canvas.height); //清除畫布

canvas.toDataURL(); //把canvas轉化成base64