在网上看了一篇管道工玛利亚走动的图片,感觉人物走动的太生涩了,就写了一下代码改动一下:
js 代码:
//定义数组图片集合 var marios = new Array("image/QQ截图20141119164825.png", "image/QQ截图20141119164845.png", "image/QQ截图20141119164908.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代码:
<body onload="init()"> <canvas id="mycanvas" width="400" height="100" style="border: 1px solid #888888;"></canvas> </body>图片: