HTML5动态画面的实现demo演示

main

window.onload = function(){
setInterval(function(){main();}, 150);
};

var pic1 = "http://images.cnblogs.com/cnblogs_com/ducle/412065/o_01.png";
var pic2 = "http://images.cnblogs.com/cnblogs_com/ducle/412065/o_02.png";
var pic3 = "http://images.cnblogs.com/cnblogs_com/ducle/412065/o_03.png";

var picArry = [pic1, pic2, pic3];

var newImgName = new Image();
newImgName.src = pic1;

var picArrsub = 0;

function main(){
var cElem = document.getElementById("CANVAS");
var cxt = cElem.getContext("2d");

cxt.clearRect(0, 0, 300, 300);
cxt.drawImage(newImgName,100,100);
cxt.save();
//处理图片

if(picArrsub >= picArry.length - 1){
picArrsub = 0;
}else{
picArrsub += 1;
}

newImgName.src = picArry[picArrsub];
}

body{background-color:white; margin: 0 0 0 10px; width:98%;}
#allHead{display:none;}
#allFoot{display:none;}

Your browser does not support the canvas element. Please update your browser or download other browsers support html5.