一：主题部分

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. DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)

    直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...

  2. Java中list如何利用遍历进行删除操作

    转: Java中list如何利用遍历进行删除操作 2018年03月31日 10:23:41 Little White_007 阅读数:3874   Java三种遍历如何进行list的便利删除: 1.f ...

  3. 日志备份的shell脚本

    以前工作中写的日志备份的脚本,现记录一下日志备份脚本代码,以后工作中遇到遇到需要备份或者清理日志的时候可以拿来简单修改一下使用,减少工作量. 把备份脚本添加到Linux定时任务中,可以定时执行. 日志 ...

  4. 调试技巧 ------ printf 的使用技巧

    编译器宏:__FUNCTION__,__FILE__,__LINE__ #define __debug #ifdef __debug //#define debug(format,...) print ...

  5. Java基础-SSM之Spring和Mybatis整合案例

    Java基础-SSM之Spring和Mybatis整合案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   在之前我分享过mybatis和Spring的配置案例,想必大家对它们的 ...

  6. Java基础-虚拟内存之映射字节缓冲区（MappedByteBuffer）

    Java基础-虚拟内存之映射字节缓冲区(MappedByteBuffer) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.映射字节缓冲区 1>.什么是虚拟内存 答:虚拟内 ...

  7. jeecms常用的标签

    友情链接 <dt>友情链接:</dt> [@cms_friendlink_list] [#list tag_list as link] <dd><a href ...

  8. 【前端安全】JavaScript防XSS攻击

    什么是XSS XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本的脚本注入式攻击.本来缩小应该是CSS,但为了和层叠样式(Cas ...

  9. POJ-2253 Frogger（最短路）

    https://vjudge.net/problem/POJ-2253 题意 公青蛙想到母青蛙那里去,期间有许多石头,公青蛙可以通过这些石头跳过去.问至少要跳的最大距离,即所有路径上石头间的最大距离的 ...

  10. jquery操作select(取值，设置选中）[转]

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...