一：主题部分

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. stm32的双向io口

    # stm的io设置为双向问题,将io端口模式配置为 open-drain mode > 在io端口配置为输出模式时,输入通道上的施密特触发器一直是打开的,所以读取IDR是能检测到端口电平的 & ...

  2. hdu5242 Game (贪心+dfs序)

    dfs序后用线段树来记每个节点的前缀和 每次找一个前缀和最大的节点,然后把它到根的路径上的每个之前没被走过的点 对应的dfs序的区间 减掉那个点的权值 每个点最多被减一次,复杂度是$O(nlogn)$ ...

  3. 51nod 1450 闯关游戏

    首先肯定要先把所有的关卡打通后去找两星几率最大的关卡刷星(论打游戏经验的重要性). 所以从两星几率小的关打起,记录当前拿到x个星星的几率和当前走过的期望步数,如果发现剩下的关必须全两星,就直接计算答案 ...

  4. 使用ImageMagick 在图片上绘制粗斜体的中文也许是一个错误。

    测试发现: ImageMagick使用中文字体,在图片上绘制带粗或斜体的中文,看不到效果. 如果使用英文字体,绘制粗或斜体的英文,99%都有效果. 今天无意看到一篇文章提到: convert -lis ...

  5. DCT变换、DCT反变换、分块DCT变换

    一.引言 DCT变换的全称是离散余弦变换(Discrete Cosine Transform),主要用于将数据或图像的压缩,能够将空域的信号转换到频域上,具有良好的去相关性的性能.DCT变换本身是无损 ...

  6. django-simple-captcha 验证码插件

    官方文档:http://django-simple-captcha.readthedocs.io/en/latest/usage.html#installation github:https://gi ...

  7. webpack打包提取css到独立文件

    将本来镶嵌在bundle.js的css转到外面来,我们需要用到一个插件:extract-text-webpack-plugin 使用方法: 1.安装 npm i extract-text-webpac ...

  8. Redis记录-redis和memcached的区别

    1.Redis和Memcache都是将数据存放在内存中,都是内存数据库.不过memcache还可用于缓存其他东西,例如图片.视频等等: 2.Redis不仅仅支持简单的k/v类型的数据,同时还提供lis ...

  9. C#的Lamda表达式_匿名函数

  10. Why do we make statistics so hard for our students?

    Why do we make statistics so hard for our students? (Warning: long and slightly wonkish) If you’re l ...