一、使用cavas实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin: 20px"> <canvas id="canvas" width="700" height="400" style="border:black solid 1px"></canvas> </body> <script> var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); var butterfly = new Image(); butterfly.src = "../img/butterfly.png"; butterfly.onload = drawButterflies; function drawButterflies() { ctx.drawImage(butterfly, 0, 0, 204, 149, 0, 0, 204, 149) ctx.drawImage(butterfly, 0, 0, 204, 149, 200, 0, 204, 149) ctx.drawImage(butterfly, 0, 0, 204, 149, 400, 0, 204, 149) //1s后，重绘图片 setTimeout(moveButterfly, 1000); } function moveButterfly() { //清空获取 ctx.clearRect(0, 0, c.width, c.height); ctx.drawImage(butterfly, 0, 0, 204, 149, 0, 0, 204, 149) ctx.drawImage(butterfly, 0, 0, 204, 149, 200, 200, 204, 149) ctx.drawImage(butterfly, 0, 0, 204, 149, 400, 0, 204, 149) } </script> </html>
二、使用CreateJS实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/easeljs.min.js"></script> </head> <body style="margin: 20px" onload="init()"> <canvas id="canvas" width="700" height="400" style="border:black solid 1px"></canvas> </body> <script> <!-- 定义舞台--> var stage; function init(){ //初始化舞台 stage=new createjs.Stage(document.getElementById('canvas')); //绑定tick事件 createjs.Ticker.addEventListener("tick",handleTick); //设置更新 createjs.Ticker.setFPS(60); start(); } function handleTick(e){ stage.update(); } function start(){ drawButterflies(); } var butterfly2; function drawButterflies(){ //获取图片路径 var imgPath='../img/butterfly.png'; //读取图片 var butterfly1 = new createjs.Bitmap(imgPath); butterfly2 = new createjs.Bitmap(imgPath); var butterfly3 = new createjs.Bitmap(imgPath); butterfly2.x=200; butterfly3.x=400; //设置舞台元素 stage.addChild(butterfly1,butterfly2,butterfly3); //更新舞台 stage.update(); //延时更新位置 setTimeout(moveButterfly,1000); } function moveButterfly(){ butterfly2.y+=200; } </script> </html>
https://code.createjs.com/1.0.0/createjs.min.js
三、CreateJS元素交换位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/easeljs.min.js"></script> </head> <body style="margin: 20px" onload="init()"> <canvas id="canvas" width="700" height="400" style="border:black solid 1px"></canvas> </body> <script> <!-- 定义舞台--> var stage; function init() { //初始化舞台 stage = new createjs.Stage(document.getElementById('canvas')); //绑定tick事件 createjs.Ticker.addEventListener("tick", handleTick); //设置更新 createjs.Ticker.setFPS(60); start(); } function handleTick(e) { stage.update(); } function start() { drawButterflies(); } var butterfly1 var butterfly2; function drawButterflies() { //获取图片路径 var imgPath = '../img/butterfly.png'; //读取图片 butterfly1 = new createjs.Bitmap(imgPath); butterfly2 = new createjs.Bitmap(imgPath); butterfly2.x = 90; butterfly2.y = 40; //设置舞台元素 stage.addChild(butterfly2, butterfly1); //更新舞台 stage.update(); //延时更新位置 setTimeout(swapButterfies, 1000); } function swapButterfies() { //元素更换位置 stage.swapChildren(butterfly1,butterfly2) } </script> </html>
