一：主题部分

1.介绍

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

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

2.弹跳程序

  1.  <!DOCTYPE html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <title>canvas dynamic</title>
  5.      <script src="D:\jquery\jquery-1.12.4.min.js"></script>
  6.  </head>
  7.  <body>
  8.      <canvas id="dynamic" width="200" height="200"></canvas>
  9.      <br/>
  10.      <script type="text/javascript">
  11.          var width=200;
  12.          var height=200;
  13.          var start=0;
  14.          var exp=1;
  15.          var canvas=document.getElementById("dynamic");
  16.          var dynamic=canvas.getContext("2d");
  17.          function draw(){
  18.              dynamic.clearRect(0,0,width,height);
  19.              dynamic.fillStyle="red";
  20.              dynamic.beginPath();
  21.              dynamic.arc(100,start,30,0,Math.PI*2,1);
  22.              dynamic.closePath();
  23.              dynamic.fill();
  24.              start=start+exp;
  25.              if(start==0||start==height-1){
  26.                  exp=exp*-1;
  27.              }
  28.          }
  29.      </script>
  30.      <input onclick="dyid=setInterval(draw,10);" type="button" value="开始"/>
  31.      <input onclick="clearInterval(dyid);" type="button" value="停止">
  32.  </body>
  33.  </html>

3.运行结果

　　

4.气球程序

  1.  <!DOCTYPE html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <title>canvas dynamic</title>
  5.      <script src="D:\jquery\jquery-1.12.4.min.js"></script>
  6.  </head>
  7.  <body>
  8.      <canvas id="dynamic" width="400" height="200"></canvas>
  9.      <br/>
  10.      <script type="text/javascript">
  11.          var width=400;
  12.          var height=200;
  13.          var start=0;
  14.          var exp=1;
  15.          var canvas=document.getElementById("dynamic");
  16.          var dynamic=canvas.getContext("2d");
  17.          function draw(){
  18.              dynamic.clearRect(0,0,width,height);
  19.              dynamic.fillStyle="red";
  20.              dynamic.beginPath();
  21.              dynamic.arc(200,start,start,0,Math.PI*2,1);
  22.              dynamic.closePath();
  23.              dynamic.fill();
  24.              start=start+exp;
  25.              if(start==0||start==height-1){
  26.                  exp=exp*-1;
  27.              }
  28.          }
  29.      </script>
  30.      <input onclick="dyid=setInterval(draw,10);" type="button" value="开始"/>
  31.      <input onclick="clearInterval(dyid);" type="button" value="停止">
  32.  </body>
  33.  </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. 洛谷 P1344 [USACO4.4]追查坏牛奶Pollutant Control 解题报告

    P1344 [USACO4.4]追查坏牛奶Pollutant Control 题目描述 你第一天接手三鹿牛奶公司就发生了一件倒霉的事情:公司不小心发送了一批有三聚氰胺的牛奶.很不幸,你发现这件事的时候 ...

  2. bzoj4152 The Captain (dijkstra)

    做dijkstra,但只需要贪心地把每个点连到它左边.右边.上边.下面的第一个点就可以了 #include<bits/stdc++.h> #define pa pair<int,in ...

  3. Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction 异常一例

    参考下面的文章,最终找到我的报错原因: 我是在 service中一个以 get开头的方法中,加入了一行数据库数据删除代码,因为 spring的事务配置中,配置了get开头的方法 是 readonle的 ...

  4. (转)flask的context机制

    本文转自:https://blog.tonyseek.com/post/the-context-mechanism-of-flask/ 作者:无知的 TonySeek 注意:本文仅仅作为个人mark, ...

  5. Ubuntu下安装BeautifulSoup4

    先去下载beautifulsoup的安装包https://www.crummy.com/software/BeautifulSoup/bs4/download/4.0/ 下载完之后解压 tar -xv ...

  6. SQL记录-PLSQL事务

    PL/SQL事务   数据库事务是一个工作的原子单元,其可以由一个或多个相关的SQL语句组成.所谓的原子性就是数据库的修改所带来的构成事务的SQL语句可以集体被提交,即永久到数据库或从数据库中(撤消) ...

  7. Linux命令（四）文件传输

    1. 将当前目录下的test1.txt文件,复制到 /tmp/Douzi目录下,命名为test1.py   2. 将服务器/tmp/Douzi/hello.py复制到本地上,重命名为 hello_Do ...

  8. CSS那些事！这个篇幅是我特意开的，不是因为帮助小菜之类的，而是在多人的团队配合中各种命名冲突的规范让人蛋疼

    CSS那些事!这个篇幅是我特意开的,不是因为帮助小菜之类的,而是在多人的团队配合中各种命名冲突的规范让人蛋疼. css这个东西只要不是新的离谱都会写,但是每个人的命名风格,方法,都不同 有人喜欢驼峰, ...

  9. yii2框架目录

    框架目录结构 [目录] backend——后台web程序 common——公共的文件 console——控制台程序 environments——环境配置 frontend——前台web程序 [文件] ...

  10. 洛谷 P3916 【图的遍历】反向加边+dfs

    前言: 对于这类带环的图,一般记忆化搜索不能很好的对所有遍历的边进行更新取值.因为环上的点可以相互到达,所以他们的答案因当是同步更新的,而dfs一旦你回溯完环上某个点就不会在更新这个点的答案了,做不到 ...