我相信你已经在3三分钟内看完并看懂了这个动画的制作过程和原理。当然，这个动画很简单，我们这里只是粗浅的讲解一些HTML5画布(Canvas)动画技术的皮毛。如果想真正的成为Web动画告诉，那你还需要做很多的努力。但如果你只是业余爱好，我相信这已经足够让你骄傲了。

相关 [html5 canvas 动画] 推荐：

html5 canvas入门 - - Marshal's Blog

可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：. context.moveTo(100, 100);//移动到起点. context.lineTo(1024-100, 768-100);//从起点划线到端点. context.lineWidth = 10;//线的宽度.

八大疯狂的HTML5 Canvas及WebGL动画效果 - - HTML5研究小组

HTML5、WebGL和JavaScript改变了长久以来的动画制作行业. 在过去的几年中，我们想要制作卓越的网页动画只能使用Flash和Java Applet. 而现在，使用脚本语言和渲染器在浏览器中实现疯狂的动画效果已经成为可能. 我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果. 现在浏览器和web技术的不断发展. 浏览器如Firefox、Chrome、Safari和IE10，web技术如Canvas、SVG和WebGL. 一些体验需要实时数据流和预加载资源，更好的网络状况能有更好的体验. 我们挑选了8个由WebGL、HTML5 Canvas和Javascript制作的绝妙效果.

分享8款令人惊叹的HTML5 Canvas动画特效 - - Web前端 - ITeye博客

HTML5的确可以制作出非常绚丽的网页动画效果，尤其是利用HTML5 Canvas特性和HTML5 3D特性，我们更加可以欣赏到超酷的动画特效. 今天我从html5tricks网站上整理了8款令人惊叹的HTML5 Canvas动画教程，大家可以一起来看看. 1、3D HTML5 Logo动画 HTML5多视角3D旋转动画. HTML5 3D动画实现起来非常方便，之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的，而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的，该动画实现了HTML5 Logo旋转的效果. 2、HTML5版Flappy Bird游戏 仅65行Javascript代码.

三分钟HTML5画布(Canvas)动画教程 - - WebHek

通常大部分Web程序员平时的工作只是开发一些常规的网站、信息化办公系统等. 在他们的眼里，Web游戏动画开发程序员似乎神奇的多，Web游戏动画明显比普通的Web应用要灵活，更注重交互和视觉冲击，而动画动作、做图配色等方面更是外行. 之前我也在一篇《 未来web浏览技术提前体验：10个会让你惊叹不已的HTML5画布(canvas)技术应用演示》中向大家展示了Web动画的神奇魅力. 你只需要掌握一些非常基本的知识就能开发出非常漂亮的Web动画. 以前开发动画应用你可能需要学习很复杂的动画制作框架. 自从HTML5画布(Canvas)功能面世后，Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果.

备份：html5 canvas cheat sheet - - 膘叔

纯备份资料,HTML5的canvas资料.

html5 canvas 图像处理 - - HTML5研究小组

前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理，在此稍稍交代一下. 与matlab处理图像类似的是，这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. >canvas图像处理</. >是时候更换浏览器了<. >点击下载firefox</. context1.drawImage(image,0,0);//绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置. 1)html5 的canvas调用. var canvas1=document.getElementById('canvas1');//获取canvas元素.

HTML5 Canvas双缓存实例 - - Web前端 - ITeye博客

转自：?id=255. 下面是用HTML5的<canvas>标签写的一个视差滚动动画的示例. 采用了制作动画或者游戏编程中常用的双缓冲技术：获取到页面中的Canvas对象之后，创建了一个与页面Canvas同样大小的Canvas对象. 绘图时先将图像绘制到缓冲Canvas中，等到每一桢的图像绘制完全后在把整个缓冲Canvas绘制到页面Canvas中. 前景、中景、远景的视差通过控制移动速度来实现. 整个动画的绘制部分只使用了Context对象的drawImage()方法. contextBuffer.drawImage(image, left, 0, d0, HEIGHT, dx, dy, d0, HEIGHT);.

HTML5 Canvas: 测试浏览器是否支持Canvas - - CSDN博客Web前端推荐文章

本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后，我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说，如果上下文不存在的话，Canvas也就名存实亡了. 测试浏览器是否支持Canvas有好几种方法. 第一种方法是检查HTML页面中Canvas元素的getContext方法是否存在：. 事实上，上述代码测试了两点：其一，测试了theCanvas是否为false（如果id不存在的话，document.getElementById()会返回false）；其二，测试了getContext()函数是否存在.

HTML5 Canvas开发框架：CasualJS Framework - Jimmy - ITeye论坛最新讨论