1.清除Canvas的内容

clearRect(x,y,width,height)函数用于清除图像中指定矩形区域的内容

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>4.9.1.html</title>

 </head>

 <body>

 <canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas>

 <script type="text/javascript">

     var c=document.getElementById("myCanvas");

     var ctx=c.getContext("2d");

     ctx.fillStyle="blue";

     ctx.fillRect(0,0,400,200);

     ctx.clearRect(50,50,150,100);

 </script>

 </body>

 </html>

显示：

2.创建动画

步骤1：指定坐标点（100,100）为圆心，绘制半径为0的圆；

步骤2：间隔10秒后，清除之前绘制的图形；

步骤3：再次以坐标点（100,100）为圆心，绘制半径为1的圆，依次类推，直到圆的半径等于100；

步骤4：以（100,100）为圆心，绘制半径99的圆，依次类推，直到圆的半径等于0；

步骤5：然后再增加圆的半径，这样让动画往返运动；

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <canvas id="myCanvas" width="500" height="500"></canvas>

     <!--每10毫秒重新绘制一次图形-->

     <button onclick="tt=setInterval(action ,10);">开始</button>

     <button onclick="clearInterval(tt);">停止</button>

     <script type="text/javascript">

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

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

         var dir=0;

         var width=500;

         var height=500;

         var per=1;                           //每次增加的半径值

         function action(){

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

             ctx.fillStyle="red";           //设置颜色

             ctx.beginPath();                 //开始新的绘画

             ctx.arc(260,260,dir,0,Math.PI*2);//绘制圆

             ctx.closePath();                 //结束画布

             ctx.fill();                      //结束渲染

             dir=dir+per;

             if(dir==0 || dir==height/2){   //判断圆半径的大小

                 per=per*-1;                 //往相反的方向运动

             }

         }

     </script>

 </body>

 </html>

显示：

用Canvas实现动画效果的更多相关文章

  1. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  2. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

  3. canvas/CSS仪表盘效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  5. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  6. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  7. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  8. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  9. 使用JavaScript和Canvas实现下雪动画效果

    该下雪动画效果使用了HTML5中Canvas画布实现,其中涉及了物理学中曲线运动的相关知识与运算. index.html <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. 启动/关闭oracle服务有三种方式

    启动oracle服务有三种方式: 1 从控制面板 2 使用MS-DOS命令 3 通过Oracle Administration Assistant for WindowsNT -通过控制面板启动ora ...

  2. nginx 安全优化

    http://nginx.org/en/docs/http/ngx_http_access_module.html  官网 1.允许特定的ip访问,拒绝特定ip server { listen 80; ...

  3. kvm常用操作

    安装一些虚拟化的组件 yum -y install kvm python-virtinst libvirt bridge-utils virt-manager qemu-kvm-tools virt- ...

  4. Mellanox 8亿美元收购EZchip

    http://www.iccsz.com/site/cn/News/2015/10/08/20151008003916131771.htm Mellanox 8亿美元收购EZchip 目标电信运营商 ...

  5. Redux状态管理方法与实例

    状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...

  6. SpringMVC注解开发初步

    一.(补充)视图解析器---XmlViewResolver 作用:分离配置信息. 在视图解析器---BeanNameViewResolver的基础之上进行扩充,新建一个myView.xml分离信息 在 ...

  7. python 小程序 复制目录树

    1. 将一个目录树完全复制到另外一个目录下面 import os, sys """ 复制目录树 """ maxloadsize = 1024 ...

  8. FineUI（开源版）v4.2.2发布（8年125个版本，官网示例突破300个）！

    开源版是 FineUI 的基石,从 2008 年至今已经持续发布了 120 多个版本,拥有会员 15,000 多位,捐赠会员达到 1,200 多位.   FineUI(开源版)v4.2.2 是 8 年 ...

  9. JAVA多线程的总结

    1-----------------------------------基本概念------------------------------------------------- (1)多线程:一个应 ...

  10. CDQ分治

    要求可以计算前面的操作对后面询问的贡献 BZOJ1176 #include <cstdio> #include <algorithm> using namespace std; ...