好吧这个系列终于要完了,继续展示特效效果。
幻灯片效果:
这个很简单,无非是建立一个定时器去刷新图片。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Canvas Image Rotator Example</title>
<script type="text/javascript">
var imagePaths = [
"images/j0149014.jpg", "images/j0149024.jpg", "images/j0149029.jpg", "images/j0178677.jpg"
];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
window.onload = function () {
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','600');
img.setAttribute('height','400');
switchImage();
// start the animation
setInterval(switchImage,3000);
}
function switchImage() {
img.setAttribute('src',imagePaths[currentImage++]);
img.onload = function() {
if (currentImage >= imagePaths.length)
currentImage = 0;
showCanvasCtx.drawImage(img,0,0,600,400);
}
}
</script>
</head>
<body>
<canvas id='showCanvas' width='600' height='400'>
Canvas Not Supported
</canvas>
</body>
</html>
对于幻灯片效果做一下平滑处理,主要用到了globalAlpha:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Canvas Image Rotator Example</title>
<script type="text/javascript">
var imagePaths = [
"images/j0149014.jpg", "images/j0149024.jpg", "images/j0149029.jpg", "images/j0178677.jpg"
];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
window.onload = function () {
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','600');
img.setAttribute('height','400');
switchImage();
// start the animation
setInterval(switchImage,3000);
}
function switchImage() {
img.setAttribute('src',imagePaths[currentImage++]);
if (currentImage >= imagePaths.length)
currentImage = 0;
showCanvasCtx.globalAlpha = 0.1;
revealTimer = setInterval(revealImage,100);
}
function revealImage() {
showCanvasCtx.save();
showCanvasCtx.drawImage(img,0,0,600,400);
showCanvasCtx.globalAlpha += 0.1;
if (showCanvasCtx.globalAlpha >= 1.0)
clearInterval(revealTimer);
showCanvasCtx.restore();
}
</script>
</head>
<body>
<canvas id='showCanvas' width='600' height='400'>
Canvas Not Supported
</canvas>
</body>
</html>
一个简单的动画绘制:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Canvas Test With No Buffering</title>
<script type="text/javascript">
var rectY=200, rectW=40;
var rectX = -rectW;
var canvas = null;
var context = null;
function init() {
canvas = document.getElementById('testCanvas');
context = canvas.getContext("2d");
blank();
context.fillStyle= "yellow";
context.fillRect(rectX,rectY,rectW,rectW);
setInterval(anim, 30);
}
function blank() {
context.fillStyle = "#00ddee";
context.fillRect(0,0,context.canvas.width, context.canvas.height);
}
function anim() {
if (rectX < context.canvas.width) {
blank();
rectX += 5;
context.fillStyle = "yellow";
context.strokeStyle = "red";
context.lineWidth = 3;
context.fillRect(rectX,rectY,rectW,rectW);
context.strokeRect(rectX,rectY,rectW,rectW);
}
else rectX=-rectW;
}
</script>
</head>
<body οnlοad="init()">
<canvas id="testCanvas" width="400" height="400">
Canvas not supported
</canvas>
</body>
</html>
加上双缓冲之后,画面不再闪烁:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Canvas Test Using Double Buffering</title>
<script type="text/javascript">
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200;
function Flake() {
this.x = Math.round(Math.random() * context.canvas.width);
this.y = -10;
this.drift = Math.random();
this.speed = Math.round(Math.random() * 5) + 1;
this.width = (Math.random() * 3) + 2;
this.height = this.width;
}
function init() {
canvas = document.getElementById('testCanvas');
context = canvas.getContext("2d");
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");
bufferCanvasCtx.canvas.width = context.canvas.width;
bufferCanvasCtx.canvas.height = context.canvas.height;
// initialize the rects
flakeTimer = setInterval(addFlake, 200);
Draw();
setInterval(animate, 30);
}
function addFlake() {
flakeArray[flakeArray.length] = new Flake();
if (flakeArray.length == maxFlakes)
clearInterval(flakeTimer);
}
function blank() {
bufferCanvasCtx.fillStyle = "#330033";
bufferCanvasCtx.fillRect(0,0,bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
}
function animate() {
Update();
Draw();
}
function Update() {
for (var i = 0; i < flakeArray.length; i++) {
if (flakeArray[i].y < context.canvas.height) {
flakeArray[i].y += flakeArray[i].speed;
if (flakeArray[i].y > context.canvas.height)
flakeArray[i].y = -5;
flakeArray[i].x += flakeArray[i].drift;
if (flakeArray[i].x > context.canvas.width)
flakeArray[i].x = 0;
}
}
}
function Draw(){
context.save();
/*
// create a clipping region
bufferCanvasCtx.beginPath();
bufferCanvasCtx.fillStyle="black";
bufferCanvasCtx.fillRect(0,0,bufferCanvas.width,bufferCanvas.height);
bufferCanvasCtx.arc(bufferCanvas.width/2,bufferCanvas.height/2,bufferCanvas.height/3,0,2*Math.PI);
bufferCanvasCtx.clip();
*/
blank();
for (var i = 0; i < flakeArray.length; i++) {
bufferCanvasCtx.fillStyle = "white";
bufferCanvasCtx.fillRect(flakeArray[i].x,flakeArray[i].y,flakeArray[i].width,flakeArray[i].height);
}
// copy the entire rendered image from the buffer canvas to the visible one
context.drawImage(bufferCanvas, 0,0,bufferCanvas.width, bufferCanvas.height);
context.restore();
}
</script>
</head>
<body οnlοad="init()">
<canvas id="testCanvas" width="800" height="800">
Canvas not supported
</canvas>
</body>
</html>
主要是通过以下代码创建了一个Canvas,之后将在这个Canvas上绘制完毕后拷贝到显示Canvas上。
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");