一、使用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 butterfly1var 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>

canvas与CreateJS实现图片动画相关推荐

前端实现图片快速反转替换_在canvas上实现元素图片镜像翻转动画效果的方法
一.Canvas图片水平镜像翻转效果预览 demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转, ...
flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...
Canvas画布、SVG图片
Canvas 一.canvas 1.<canvas>标签:画布标签 (height,width,半透明),本身不具备绘图能力,可以通过脚本(通常指js)来实现 width:设置画布宽度,默 ...
好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效
1.SVG玫瑰花盛开动画 SVG还是很强大的,我们之前也分享过很多利用SVG绘制出来的各种动画特效.比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画.今天我们要 ...
原生js通过canvas和cssRules实现图片分割与重组
将一张照片分割成几段然后重新组合,按照常理来讲使用h5的canvas标签很容易就实现了,长话短说,直入正题: html : 首先创建一个img标签: <img id="img" ...
学习 canvas （四）绘制动画
使用requestAnimationFrame绘制动画在canvas中的动画,我们可以理解为,canvas在一遍又一遍的绘制相同的东西.为了更好的适应人体的眼睛,我们绘制图像的间隔最好在16毫秒. ...
html5连续播放图片,HTML5效果：canvas处理连续帧图片
html5 canvas处理连续帧图片,下面的代码基于IE8以上 Canvas Demo var canvas = null;//初始化参数 var img = null; var ctx = nul ...
html5 canvas雨点打到窗玻璃动画
html5 canvas雨点打到窗玻璃动画 HTML5下雨效果效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: 1 <!doctype h ...
第166天：canvas绘制饼状图动画
canvas绘制饼状图动画 1.HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 < ...

canvas与CreateJS实现图片动画

一、使用cavas实现

二、使用CreateJS实现

三、CreateJS元素交换位置

canvas与CreateJS实现图片动画相关推荐

最新文章

热门文章