一：主题部分

1.介绍

　　canvas可以实现画图功能，所以只要通过js的控制，就可以实现简单的动画效果。

　　这里主要是两个程序，一个小球来回上下弹跳，一个是吹气球。

2.弹跳程序

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <title>canvas dynamic</title>

     <script src="D:\jquery\jquery-1.12.4.min.js"></script>

 </head>

 <body>

     <canvas id="dynamic" width="200" height="200"></canvas>

     <br/>

     <script type="text/javascript">

         var width=200;

         var height=200;

         var start=0;

         var exp=1;

         var canvas=document.getElementById("dynamic");

         var dynamic=canvas.getContext("2d");

         function draw(){

             dynamic.clearRect(0,0,width,height);

             dynamic.fillStyle="red";

             dynamic.beginPath();

             dynamic.arc(100,start,30,0,Math.PI*2,1);

             dynamic.closePath();

             dynamic.fill();

             start=start+exp;

             if(start==0||start==height-1){

                 exp=exp*-1;

             }

         }

     </script>

     <input onclick="dyid=setInterval(draw,10);" type="button" value="开始"/>

     <input onclick="clearInterval(dyid);" type="button" value="停止">

 </body>

 </html>

3.运行结果

　　

4.气球程序

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <title>canvas dynamic</title>

     <script src="D:\jquery\jquery-1.12.4.min.js"></script>

 </head>

 <body>

     <canvas id="dynamic" width="400" height="200"></canvas>

     <br/>

     <script type="text/javascript">

         var width=400;

         var height=200;

         var start=0;

         var exp=1;

         var canvas=document.getElementById("dynamic");

         var dynamic=canvas.getContext("2d");

         function draw(){

             dynamic.clearRect(0,0,width,height);

             dynamic.fillStyle="red";

             dynamic.beginPath();

             dynamic.arc(200,start,start,0,Math.PI*2,1);

             dynamic.closePath();

             dynamic.fill();

             start=start+exp;

             if(start==0||start==height-1){

                 exp=exp*-1;

             }

         }

     </script>

     <input onclick="dyid=setInterval(draw,10);" type="button" value="开始"/>

     <input onclick="clearInterval(dyid);" type="button" value="停止">

 </body>

 </html>

5.运行结果

　　

二：问题

1.

　　通过测试，发现的问题，经过多次点击之后，单击停止没有效果。

　　程序只是针对一次开始，一次停止的结果。

　　bug以后再进行修改。

H5中标签Canvas实现图像动画的更多相关文章

  1. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

  2. 从web图片裁剪出发：了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  3. 用H5中的Canvas等技术制作海报

    在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

  4. H5中需要掌握的 ANIMATION 动画效果

    CSS3的动画在PC网页上或者APP上用得越来越多,比如H5页面的应用,目前在营销传播上的意义比较大,还有企业官网或者APP主要介绍也用得比较多,当然还有很多地方都用到.所以学习css的动画也迫在眉睫 ...

  5. H5 新增标签canvas 画布

    canvas是写在body中的标签,设置宽高后,通过JS来往其中绘制想要的内容, canvas可以理解为一个画板,而JS就是你的画笔. 1.获取到画布 var canvas = document.ge ...

  6. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  7. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  8. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  9. Android中使用SurfaceView和Canvas来绘制动画

    事实上每一个View中都有Canvas能够用来绘制动画.仅仅须要在这个View中重载onDraw()方法就能够,可是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做&quo ...

随机推荐

  1. 【Revit API】创建工作集并将element加入工作集中

    话不多说,直接上代码! public class WorkSetHelper { public void AddElementsToWorkSet(Document doc, List<Elem ...

  2. 洛谷 P1070 道路游戏 解题报告

    P1070 道路游戏 题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有\(n\)个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依 ...

  3. get请求中的url encode问题

    首先发表一下感慨,Python的requests模块确实太简便,省却了很多的转码等等等等的问题,但这也是缺点,对于我这种基础不好的同学来说让我少知道了许多本来应该知道的东西. url encode: ...

  4. python xml.etree.ElementTree模块

    使用的XML文件如下:file.xml <?xml version="1.0"?> <data name="ming"> <cou ...

  5. bzoj千题计划254：bzoj2286: [Sdoi2011]消耗战

    http://www.lydsy.com/JudgeOnline/problem.php?id=2286 虚树上树形DP #include<cmath> #include<cstdi ...

  6. 在html5 canvas的destination-atop属性的一些奇怪的问题

    最近在整理canvas的时候发现HTML5 Canvas开发详解一个奇怪的属性解释 目标图形是显示在画布上的位图 而原图形是指要回执在画布上的形状 w3school上面是这样说的 destinatio ...

  7. 使用渐进式JPEG来提升用户体验

    今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别 ...

  8. TTPRequest 提示#import <libxml/HTMLparser.h>找不到 的解决方法

    本文永久地址为http://www.cnblogs.com/ChenYilong/p/3984251.html ,转载请注明出处. ASIHTTPRequest 或者AFNetwork提示的#impo ...

  9. grep 正则表达

    常见的 grep 正则表达参数 -c # 显示匹配到得行的数目,不显示内容 -h # 不显示文件名 -i # 忽略大小写 -l # 只列出匹配行所在文件的文件名 -n # 在每一行中加上相对行号 -s ...

  10. 关于cookie和session

    在设置cookie的时候,它会保留在本地,无论你有没有退出浏览器都是.但是session只能在登录状态有效.退出浏览器过后就会消除掉.同时设置也是有问题的. @app.route('/login',m ...