canvas圖片操作
圖片動畫,一條游動的魚
//核心代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body {background:black; text-align:center;}
#c1 {background:white;}
</style>
<script>
window.onload=function (){
let oC=document.getElementById('c1');
let gd=oC.getContext('2d');
let pause=false;//控制是否暫停游動,默認是否
let i=0;//圖片下標
let x=100;//默認起始位置
let frameCounter=0;//動畫計數器
let oImg=new Image();
oImg.src='fish1.png';//一張游動的魚,行走圖
oImg.onload=function (){
requestAnimationFrame(next);//調用幀動畫
function next(){
if(!pause){//如果沒有暫停
gd.clearRect(0, 0, oC.width, oC.height);//清除原圖片
if(frameCounter%4==0){//動畫計數器,用來控制動畫頻率
i++;//切換圖片
if(i==4)i=0;//超過第四張圖片就回到第一張
}
x+=1.5;//魚的位置+1.5,向前進
//畫魚,連續切換行走圖,實現原地游動,x++實現向前游動
gd.drawImage(
oImg,
//sx, sy, sw, sh
0, i*37, 55, 37,
//dx, dy, dw, dh
x, 100, 55, 37
);
frameCounter++;//計數器++
}
requestAnimationFrame(next);//遞歸調用幀動畫
}
};
document.onclick=function (){
pause=!pause;//控制點擊暫停
};
};
</script>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>
canvas像素級操作
window.onload=function (){
let oC=document.getElementById('c1');
let gd=oC.getContext('2d');
let W=oC.width,H=oC.height;
let oImg=new Image();
oImg.src='http://localhost/2018-3-20/2.jpg';
oImg.onload=function (){
gd.drawImage(oImg, 0, 0);
let imageData=gd.getImageData(0, 0, W, H);
let data=imageData.data;
for(let r=0;r<H;r++){
for(let c=0;c<W;c++){
//(r*W+c)*4 行*寬+列可以得到像素點,*4得到RGBA
//(r*W+c)*4+0 => r
//(r*W+c)*4+1 => g
//(r*W+c)*4+2 => b
//(r*W+c)*4+3 => a
data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
1.0*(data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;//除以3得到平均值,就是灰色,乘以倍數即可提高亮度
}
}
gd.putImageData(imageData, 0, 0);
};
};
canvas視頻(video)操作
<script>
window.onload=function (){
let oV=document.getElementById('v1');
let oC=document.getElementById('c1');
let gd=oC.getContext('2d');
let W=oC.width,H=oC.height;
requestAnimationFrame(next);
function next(){
gd.drawImage(oV, 0, 0);
//
let imageData=gd.getImageData(0, 0, W, H);
let data=imageData.data;
for(let r=0;r<H;r++){
for(let c=0;c<W;c++){
data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
(data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;
}
}
gd.putImageData(imageData, 0, 0);
requestAnimationFrame(next);
}
};
</script>
</head>
<body>
<video src="movie.ogg" id="v1" autoplay loop style="display:none;"></video>
<canvas id="c1" width="320" height="240"></canvas>
</body>
