繪制圖片，要求圖片必須在加載完成之后。
drawImage(img,x,y)圖片有多大繪制多大；
drawImage(img,x,y,iw,ih)將圖片繪制到指定大小內(nèi)，會(huì)壓縮或拉伸圖片；
drawImage(img,ix,iy,iw,ih,cx,cy,cw,ch)前4個(gè)參數(shù)決定從原圖上指定位置剪下指定大小的圖，繪制到指定位置的畫布上的指定大小，會(huì)壓縮或拉伸圖片。
getImageData(x,y,w,h)獲取指定范圍內(nèi)的像素信息
putImageData(imgData,x,y)向指定范圍內(nèi)繪制像素信息
clip()裁剪：
- 必須有一條封閉的路徑
- 路徑必須在clip之前創(chuàng)建
- clip必須在drawImage之前調(diào)用
我么可以使用給定的方法，完成圖片的一些濾鏡效果。
反色
arr[i] = 255-arr[i];
arr[i+1] = 255-arr[i+1];
arr[i+2] = 255-arr[i+2];
灰度
arr[i]=arr[i+1]=arr[i+2]=(arr[i]+arr[i+1]+arr[i+2])/3;
視頻也可以通過(guò)此方式改變播放的顏色。
//first,獲取畫布
var canvas = document.querySelector("#canvas");
//second,獲取繪制環(huán)境
var ctx = canvas.getContext("2d");
var video = document.querySelector("video");
video.oncanplaythrough = function(){
function _run(){
ctx.drawImage(video,0,0);
var data = ctx.getImageData(0,0,500,500);
console.log(data);
var arr = data.data;
for (var i = 0; i < arr.length; i+=4) {
//反色
arr[i] = 255-arr[i];
arr[i+1] = 255-arr[i+1];
arr[i+2] = 255-arr[i+2];
// 灰度
arr[i]=arr[i+1]=arr[i+2]=(arr[i]+arr[i+1]+arr[i+2])/3;
}
ctx.putImageData(data,0,0);
requestAnimationFrame(_run);
}
_run();
}
圖片樣式
createPattern(img,repeatType) 創(chuàng)建平鋪對(duì)象
repeatType:平鋪類型 repeat-x repeat-y repeat no-repeat
