怎么用html5动画效果,如何在网页上用H5实现动画效果？

canvas帧--实现动画

*{padding:0;margin:0;}

canvas{display:block;background:white}

<>

var imgPic = new Image();

imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');

imgPic. = function () {

drawImg()

}

var i = 0;

var lastTime = new Date().getTime();

var delatime;

var timer = 0;

function drawImg() {

window.requestAnimationFrame(drawImg);

var now = new Date().getTime();

delatime = now - lastTime;

lastTime = now;

timer += delatime;

if (timer > 200) {

i++;

if (i > 7) i = 0;

timer = 0

}

console.log(delatime)

ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);

}

>