js+ canvas 實現人物走動

js+ canvas 實現人物走動

在網上看了一篇管道工瑪利亞走動的圖片，感覺人物走動的太生澀了，就寫了一下代碼修改一下：

js 代碼：

//定義數組圖片集合var marios = new Array("image/QQ20141119164825.png", "image/QQ20141119164845.png", "image/QQ20141119164908.png");var mario = new Image();var canvas;var ctx;var i = -1;var num = 0;function init() {//alert("----------")setInterval("draw()", 200);}function draw() {i++;//alert(i)mario.src = marios[i];//alert(mario)canvas = document.getElementById("mycanvas");ctx = canvas.getContext("2d");ctx.clearRect(0, 0, 400, 100) ctx.drawImage(mario, num, 0);num += 10;if (num == 400) {num = 0;}if (i == 2) {i = -1;}}

html代碼：

圖片：