4.7_將圖像淡入至canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>將圖像淡入至canvas</title>
<style>
body{
background: #eee;
}
#canvas{
background: #fff;
cursor: pointer;
margin-left: 20px;
margin-top: 50px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
#controls{
position: absolute;
top: 20px;
left: 50px;
}
</style>
</head>
<body>
<div id="controls"><input type="button" id="fadeBtn" value="圖畫淡入" /></div>
<canvas id="canvas" width="800" height="520"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var fadeBtn = document.getElementById('fadeBtn');
var offscreenCanvas = document.createElement('canvas');
var offscreenContext = offscreenCanvas.getContext('2d');
var imageData;
var imageDataOffscreen;
var interval = null;
var image = new Image();
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
image.src = 'img/waterfall.jpg';
image.onload = function(){
offscreenContext.drawImage(image,0,0,image.width,image.height,0,0,offscreenCanvas.width,offscreenCanvas.height);
}
fadeBtn.onclick = function(){
imageDataOffscreen = offscreenContext.getImageData(0,0,canvas.width,canvas.height);
fadeIn(context,offscreenContext.getImageData(0,0,canvas.width,canvas.height),50,1000/60);
}
function fadeIn(context,imageData,steps,millisecondsPerStep){
var frame = 0;
for(var i =3 ;i<imageData.data.length;i+=4){
imageData.data[i] = 0 ;
};
interval = setInterval(function(){
frame++;
if(frame>steps){
clearInterval(interval);
}else{
increaseTransperency(imageData,steps);
context.putImageData(imageData,0,0);
}
},millisecondsPerStep);
}
function increaseTransperency(imageData,steps){
var alpha;
var currentAlpha;
var alphaStep;
var length = imageData.data.length;
for(var i =3 ;i<length;i+=4){
alpha = imageDataOffscreen.data[i];
if(alpha>0){
currentAlpha = imageData.data[i];
alphaStep = Math.ceil(alpha/steps);
if(currentAlpha +alphaStep<=alpha){
imageData.data[i] +=alphaStep;
}else{
imageData.data[i] =alpha;
}
}
}
}
</script>
</html>
