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. Windows下SVN服务器的搭建步骤

    1.下载svn服务端和客户端 服务端VISUALSVN SERVER:https://www.visualsvn.com/ 客户端TortoiseSVN:https://tortoisesvn.net ...

  2. Time Consume Problem

    I joined the NodeJS online Course three weeks ago, but now I'm late about 2 weeks. I pay the codesch ...

  3. 读《C#高级编程》第1章问题

    读<C#高级编程>第1章 .Net机构体系笔记 网红的话:爸爸说我将来会是一个牛逼的程序员,因为我有一个梦,虽然脑壳笨但是做事情很能坚持. 本章主要是了解.Net的结构,都是一些概念,并没 ...

  4. 学习python函数笔记之一

    1.函数文档字符串,用于存放函数的说明,一般写在第一行 2.函数调用:函数名+参数列表(函数的参数分实际参数和形式参数,str就是形式参数,则'welcome 头 python'就是实际参数) 参数需 ...

  5. 第9章 Shell基础（4）_Bash的运算符及环境变量配置文件

    5. Bash的运算符 5.1 数值运算与运算符 5.1.1 declare 声明变量类型:#declare [+/-] [选项] 变量名 选项 说明 - 给变量设定类型属性 + 取消变量的类型属性 ...

  6. ngx_http_core_module模块.md

    Directives aio Syntax: aio on | off | threads[=pool]; Default: aio off; Context: http, server, locat ...

  7. Linux下Source Insight的安装和汉化

    原创文章,转载请注明出处. 工欲善其事,必先利其器.Source Insight绝对是阅读C和C++代码的利器,另外,Source Insight的体量很小,安装便捷,显示直观,比vim+cscope ...

  8. python cookbook 学习系列（一） python中的装饰器

    简介 装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理.缓 ...

  9. iOS学习-创建带下划线的button

    UIButton *tempBtn = [UIButton buttonWithType: UIButtonTypeCustom]; tempBtn.frame = CGRectMake(, , , ...

  10. asp.net webservice返回json问题

    使用jQuery $.ajax方法请求webservice 一.方法返回值为string,将json格式的字符串返回 设置contentType为"application/json;char ...