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. centos6环境下搭建irc服务器

    问题描述 有时候逛技术社区,经常会发现有个叫IRC的东西存在,想搭建下看看到底是个什么东西 说明: 操作系统环境为CentOS6.5_64 安装irc服务器 通过yum进行安装,命令如下: yum i ...

  2. 关于sql中in 和 exists 的效率问题，in真的效率低吗

    原文: http://www.cnblogs.com/AdamLee/p/5054674.html 在网上看到很多关于sql中使用in效率低的问题,于是自己做了测试来验证是否是众人说的那样. 群众: ...

  3. zabbix 中监控windows 的typepref中的值

    监控项:typepref -qx在zabbix中实现: 1.测试zabbix-get 获取数据: /usr/local/zabbix/bin/zabbix_get -s 192.168.1.3 -p1 ...

  4. QStatusBar的用法

      QStatusBa,状态栏是位于主窗口的最下方,提供一个显示工具提示等信息的地方.QMainWindow类里面就有一个statusBar()函数,用于实现状态栏的调用.以下例子都在QMainWin ...

  5. 4-pl-sql的安装

    pl-sql的安装 一．安装pl-sql 1.安装前准备 1).在windows安装的oracle client目录下创建相应目录 2).上传oracle数据库的文件到admin目录下 3).然后打开 ...

  6. What's new in Windows 10 Enterprise with Microsoft Edge.(Windows 10 新功能)

    What's new in Windows 10 Enterprise with Microsoft Edge --带有Edge浏览器的Windows 10 企业版的新功能 本文摘录自公司群发邮件, ...

  7. Windows 7安装软件时无法将注册值写入注册表的处理方法

    1. 我们来确认一下,有没有安装什么软件把注册表给封了.如杀毒软件,防火墙等.把这些软件关了之后,再安装软件试试:如果不行,就把杀毒软件卸载了,再安装软件试试. 2. 更改组策略设置 步骤: 开始-运 ...

  8. [转]An introduction to OAuth 2.0 using Facebook in ASP.NET Core

    本文转自:http://andrewlock.net/an-introduction-to-oauth-2-using-facebook-in-asp-net-core/ This is the ne ...

  9. hibernate.cfg.xml常见配置

    转载自:http://blog.csdn.net/qiaqia609/article/details/9456489 <!--标准的XML文件的起始行,version='1.0'表明XML的版本 ...

  10. JSONP是如何工作的

    我对这个问题的探究来源于一个需求: 当访问某个页面的时候,需要向另外一个网站报告一下这次访问的信息. 其实发一个跨域的请求就能大致实现这个需求.我们发跨域的例子其实很常见,例如请求一个第三方的图片.引 ...