一：主题部分

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. 简单prufer应用

    [bzoj1005] Description 自从明明学了树的结构,就对奇怪的树产生了兴趣......给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? ...

  2. 【BZOJ1862】[ZJOI2006]游戏排名系统 （Splay）

    [BZOJ1862][ZJOI2006]游戏排名系统 (Splay) 题面 BZOJ 洛谷 题解 双倍经验题

  3. 洛谷 P1993 小K的农场 解题报告

    P1993 小K的农场 题目描述 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得一些含糊的信息(共m个),以下列三种形式描述: 农场a比农场b ...

  4. spark性能调优（二） 彻底解密spark的Hash Shuffle

    装载:http://www.cnblogs.com/jcchoiling/p/6431969.html 引言 Spark HashShuffle 是它以前的版本,现在1.6x 版本默应是 Sort-B ...

  5. python爬虫 scrapy3_ 安装指南

      安装指南 安装Scrapy 注解 请先阅读 平台安装指南. 下列的安装步骤假定您已经安装好下列程序: Python 2.7 Python Package: pip and setuptools. ...

  6. CXF wsdl2java 生成java代码供客户端使用

    CXF wsdl2java 生成java代码供客户端使用 环境配置:1.下载apache-cxf-2.6.2在环境变量中配置CXF_HOME 值为E:\gavin\cxf\apache-cxf-3.0 ...

  7. vue-router 编程式导航

    借助vue-router的实例方法,通过编写代码来实现导航的切换: back:回退一步 forward:前进一步 go:指定前进回退步数 push:导航到不同url,向history栈添加一个新的记录 ...

  8. python学习笔记7-excel操作

    一.操作excel import xlwt book = xlwt.Workbook() #新建一个excel sheet = book.add_sheet('sheet1') #添加一个sheet页 ...

  9. 一些js的小技巧

    这里收集了一些编码上的小技巧,大家可以学习学习. 1.浮点转整型 使用|0快速转换 var a=(12.002)|0;//12 使用~~快速转换 ~取反运算符,2=0010,~2=1101,因为第一位 ...

  10. 20155215 2016-2017-2 《Java程序设计》第8周学习总结

    20155215 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十四章 NIO使用频道(Channel)来衔接数据节点.在处理数据时,NIO可以让你设置缓 ...