怎么用HTML实现人物吃饭,使用js实现图画人物动起来的方法

pageEncoding="UTF-8"%>

canvas元素示例

function draw(id) {

var canvas = document.getElementById(id);

if (canvas == null)

return false;

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

context.fillStyle = "#EEEEFF"; //設置顏色

context.fillRect(0, 0, 400, 300); //畫正方形

context.fillStyle = "red"; //顏色

context.strokeStyle = "blue"; //邊框顏色

context.lineWidth = 1;//邊框線寬度

context.fillRect(50, 50, 100, 100);

context.strokeRect(50, 50, 100, 100);

var img = new Image();

img.src="/img/game/askway/a.jpg";

context.drawImage(img,0,0);

setInterval(move,100);

}

var j=1;

function move()

{

$("#part3").css("background-position",-(118 * (j+1)+70*j)+"px -0px");

j++;

if(j==6){

j=0;

}

}

var i=50;

function rehua(){

setInterval(redraw,30);

}

function redraw(){

//var context = $("#canvas").getContext("2d");

var context = document.getElementById("canvas").getContext("2d");

context.clearRect(0, 0, 400, 300);

var img = new Image();

img.src="/img/game/askway/a.jpg";

context.drawImage(img, i, i);

i++;

}

#part1 {

border: solid 1px blue;

width: 90px;

height: 68px;

background-image: url(/img/game/askway/a.jpg);

background-repeat: no-repeat;

display: none;

}

#part2 {

border: solid 1px blue;

width: 90px;

height: 68px;

background-image: url(/img/game/askway/a.jpg);

background-repeat: no-repeat;

background-position: 50% 50%;

display: none;

}

#part3 {

border: solid 1px blue;

width: 70px; /* 960 576 192 192*/

height: 100px;

background-image: url(/img/game/askway/b.png);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: -118px -0px;

/* background-position:10% 5%; */

}

canvas元素示例