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. [Erlang 0123] Erlang EPMD

     epmd进程和Erlang节点进程如影随形,在Rabbitmq集群,Ejabberd集群,Couchbase集群产品文档中都会有相当多的内容讲epmd,epmd是什么呢?   epmd 是Erlan ...

  2. count(*) 与count (字段名)的区别

    count(*) 查出来的是:结果集的总条数 count(字段名) 查出来的是: 结果集中'字段名'不为空的记录的总条数

  3. SQLite学习笔记(十一)&&虚拟机原理

    前言      我们知道任何一种关系型数据库管理系统都支持SQL(Structured Query Language),相对于文件管理系统,用户不用关心数据在数据库内部如何存取,也不需要知道底层的存储 ...

  4. ASP.NET MVC 初体验

    MVC系列文章终于开始了,前段时间公司项目结束后一直在封装一个html+ashx+js+easyui的权限系统,最近差不多也完成了,迟些时候会分享源码给大家.当然这个MVC系列结束后如果时间允许还会另 ...

  5. 烂泥：python2.7和python3.5源码安装

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 前几天在centos6.6安装ansible时,一直提示python版本不对,导致不能安 ...

  6. class.c 添加中文注释（3）

    int class_device_register(struct class_device *class_dev) { /* [cgw]: 初始化一个struct class_device */ cl ...

  7. JSP动作元素——————理论篇

    JSP动作元素的组成及作用 JSP使用Action来控制Servlet引擎的行为,可重复使用JavaBean组件. 常用Action: jsp:param       在 jsp:include.js ...

  8. java.io.NotSerializableException: test.io.file.Student

    java.io.NotSerializableException: test.io.file.Student    at java.io.ObjectOutputStream.writeObject0 ...

  9. 琴弦文字 － wpf行为

    效果图: 此效果的设计和实现思路均来自:上位者的怜悯 详情见原文:http://www.cnblogs.com/lianmin/p/5940637.html 我所做的,只是将原作者的设计和思路封装成了 ...

  10. 自动化运维工具ansible部署以及使用

    测试环境master 192.168.16.74webserver1 192.168.16.70webserver2 192.168.16.72安装ansiblerpm -Uvh http://ftp ...