Canvas 图片制作动画

Canvas入门文档推荐

菜鸟教程
W3cschool

这个是做的其中一个动画，只是html案例，后来做了十个添加到项目里面了，另外实现了暂停、继续、背景音乐同步播放/同步暂停、最后还将动画转成了视频并合成了音乐实现上传下载；
（rg:下面的是es5语法，再严格模式下不能使用，需要稍微改造下）

<!DOCTYPE html>
<html><head><title>老程-Canvas-旋转过渡</title><style type="text/css">.out-div {text-align: center;padding-top: 30px;}canvas {border: 1px solid black;}</style>
</head><body><div class="out-div"><canvas id="player" width="400" height="400">Your browser does not support the HTML5 canvas tag.</canvas></div><script>//图片数组var imgList = ["https://img.alicdn.com/bao/uploaded/i2/813529278/O1CN01Civq0P2IPNCmhRuKS_!!0-item_pic.jpg","https://img.alicdn.com/bao/uploaded/i2/813529278/O1CN01iCxNOs2IPNCn4jyLf_!!0-item_pic.jpg","https://img.alicdn.com/bao/uploaded/i4/813529278/O1CN01WvBYgD2IPNCqyAEWE_!!0-item_pic.jpg","https://img.alicdn.com/bao/uploaded/i4/813529278/O1CN019jRGzx2IPNCqPBmjA_!!0-item_pic.jpg"];//特效分析，动画分两段// 1、前一张图片放大// 2、第二张图片旋转放大进场（逆时针）function rotate() {var canvas = document.getElementById('player');ctx = canvas.getContext('2d');var width = canvas.width,height = canvas.height;var moveY = 1;function animation(img1, img2, callback) { //外方法moveY = -moveYvar enlarge = 1.0;(function () { //内方法let h1 = img1.heightlet w1 = img1.widthlet h2 = img2.heightlet w2 = img2.widthif (enlarge >= 1.1) { //第二部分动作：第二张图片进场 （从上往下/从下往上）var rotate = 0;var dot = {x: 100,y: 100};var elg = 0.5;(function () {if (rotate >= 360 -14.4) {return callback(); //回调外方法}rotate += 3.6*4;dot.x -= 4;dot.y -= 4;elg += 0.02;ctx.clearRect(0, 0, width, height);ctx.drawImage(img1, 0, 0, w1, h1, 0, 0, width, height);ctx.save()let dotTemp={x:dot.x+width * elg/2,y:dot.y+height * elg/2}ctx.translate(dotTemp.x, dotTemp.y);ctx.rotate(rotate * Math.PI / 180);ctx.translate(-dotTemp.x, -dotTemp.y);ctx.drawImage(img2, 0, 0, w2, h2, dot.x, dot.y, width * elg, height * elg)ctx.restore()setTimeout(arguments.callee, 40); //回调内方法})();} else { //第一部分动作：前一张图片放大ctx.save();ctx.scale(enlarge, enlarge);enlarge += 0.002ctx.drawImage(img1, 0, 0, w1, h1, -width * (enlarge - 1) / 2, -height * (enlarge - 1) / 2,width, height);ctx.restore();setTimeout(arguments.callee, 40); //回调内方法}})();}var i = 0;(function () {animation(imgList[i], imgList[i += 1] || imgList[i = 0], arguments.callee);})();}//--------------------------------------------------------------------------------------------------------------------------------------------var imgLoaded = 0;var onload = function () { //加载网络图片imgLoaded++;if (imgLoaded == imgList.length) {rotate(); //全部加载完成调用动画};}for (var i = imgList.length; i--;) {var img = new Image(); // 创建一个<img>元素img.addEventListener('load', onload)img.src = imgList[i]; // 设置图片源地址imgList[i] = img; //加载完成后数组直接存图片对象}</script>
</body></html>

这个动画的效果如下

项目功能思路整理

Canvas 图片制作动画相关推荐

canvas粒子动画
2019独角兽企业重金招聘Python工程师标准>>> 周末在家玩了一下canvas粒子动画,先看看效果,用的图是我们微众银行的干爹'qq',先看看效果 ##1.获取图片信息 ### ...
html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
Div层悬浮实现HTML5 Canvas背景动画
在日常的学习中我接触到一些HTML5 Canvas动画,在开发 tiomg.org 太美在线工具网站的时候,想将这些震撼或小清新的动画融合到工具网站中,这样可以使原本单调的网页看起来丰富和更有设计感 ...
python制作简单动画_Python tkinter Canvas绘制动画
其实前面程序中的高亮显示已经是动画效果了.程序会用红色.黄色交替显示几何图形的边框,这样看上去就是动画效果了.实现其他动画效果也是这个原理,程序只要增加一个定时器,周期性地改变界面上图形项的颜色.大小 ...
VB利用多张PNG图片制作动画
VB利用PNG图片制作动画,本例用到GDI+来显示PNG图片,实现一个卡通人物来回徒步的效果. 'Module Option Explicit Private Declare Function Gdi ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
Canvas特效动画
给大家分享一个用Canvas绘图写成的动画特效,动画的效果如下: 以下是代码实现: <!DOCTYPE html> <html><head><title> ...
看你骨骼惊奇，这里有一套 Canvas 粒子动画方案了解一下？
导语:在日常的开发过程中,我们会常常会用到canvas来制作一些动画特效,其中有一个动画种类,需要我们生成一定数量,形状类似且行为基本一致的粒子,通过这些粒子的运动,来展现动画效果,比如:下雨,闪烁的 ...
基于Canvas的动画基本原理与数理分析
转载自https://www.jianshu.com/p/e70c9cfbdb38 什么是动画? 就像思考哲学问题无法回避思维和存在的关系一样,制作动画同样无法逃避的问题是动画的原理是什么?这里提一句 ...

Canvas 图片制作动画

Canvas入门文档推荐

Canvas 图片制作动画相关推荐

最新文章

热门文章