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. Java中的关键字 transient

    先解释下Java中的对象序列化 在讨论transient之前,有必要先搞清楚Java中序列化的含义: Java中对象的序列化指的是将对象转换成以字节序列的形式来表示,这些字节序列包含了对象的数据和信息 ...

  2. MySQL 索引

    MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是 ...

  3. ubuntu kylin 14.04安装配置MongoDB v2.6.1(转)

    1.获取最新版本 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.1.tgz 2.解压并进入bin目录 tar zxvf mongo ...

  4. 【repost】JavaScript Scoping and Hoisting

    JavaScript Scoping and Hoisting Do you know what value will be alerted if the following is executed ...

  5. Docker初体验

    ## Docker初体验 安装 因为我用的是mac,所以安装很简单,下载dmg下来之后拖拽安装即可完成. 需要注意的就是由于之前的docker是基于linux开发,不支持mac,所以就出现了docke ...

  6. 商城项目：装nginx时碰到的各种问题

    因为项目需要,我们要在linux上nginx.碰到了各种问题.在这里一一记录下来. 首先我要开启我的两个虚拟机,开起来之后.用主机的SeureCRT去连接.都是好的. 但是我在虚拟机机上去ping I ...

  7. [LeetCode] Interleaving String 交织相错的字符串

    Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example, Given: s1 ...

  8. [LeetCode] Merge Intervals 合并区间

    Given a collection of intervals, merge all overlapping intervals. For example, Given [1,3],[2,6],[8, ...

  9. [LeetCode] Swap Nodes in Pairs 成对交换节点

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  10. [LeetCode] Valid Parentheses 验证括号

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...