HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5高级知识 ——> Canvas 动画制作的基本方法

Canvas 动画制作的基本方法

2015/08/24 16:37:40 | 作者:HTML5学堂(码匠) | 分类:HTML5高级知识 | 关键词:HTML5,Canvas,动画制作

Canvas 动画制作

在前面的两篇文章《Canvas 基本绘制(上)》《Canvas 基本绘制(下)》,介绍了Canvas的基本绘制。学过SVG的童鞋应该知道它是可以制作动画,那么Canvas是否能制作动画呢?答案是肯定的。所以今天我们就给大家来介绍一下Canvas制作动画。

Canvas动画制作原理

简单一句话概括:不断的绘制与清除。

Canvas实现动画步骤(不断循环)

1、更新绘制的对象(比如位置的移动)

2、清除画布

3、在画布上重新绘制对象

Canvas 动画相关命令

clearRect方法

context.clearRect(x,y,width,height);方法清空给定矩形内的指定像素。

save与restore方法

所有的 2D 绘图上下文属性都是可保存和恢复的属性,但绘制的内容可不是,也就是说你恢复了绘图上下文,并不会恢复其所绘制的图形。

用来保存Canvas的状态(类似数组的入栈操作)。

用来恢复Canvas之前保存的状态(类似数组的出栈操作)。

这种状态包括:strokeStyle, fillStyle, lineWidth, lineCap, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline。

欢迎沟通交流~HTML5学堂

save与restore方法实例操作

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂</title>
  6.     <link rel="stylesheet" href="../css/reset.css">
  7.     <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.     <style>
  9.         .draw {
  10.             margin: 30px 20px;
  11.             border: 1px solid red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <canvas id="testCanvas" width="1000" height="500" class="draw"></canvas>
  17.     <script>
  18.         var testCanvas = document.getElementById("testCanvas");
  19.         // 获取getContext()对象
  20.         var context = testCanvas.getContext("2d");
  21.  
  22.         context.fillStyle = "red";
  23.         context.fillRect(10, 10, 150, 150);
  24.         // 保存状态(红色)
  25.         context.save();
  26.  
  27.         context.fillStyle="green";
  28.         context.fillRect(150, 150, 170, 170);
  29.         // 保存状态(绿色)
  30.         context.save();
  31.  
  32.         // 恢复状态(红色)
  33.         context.restore();
  34.         context.fillRect(250, 250, 170, 170);
  35.  
  36.         // 恢复状态(绿色)
  37.         context.restore();
  38.         context.fillRect(380, 380, 170, 170);
  39.         context.beginPath();
  40.     </script>
  41. </body>
  42. </html>

效果图

Canvas save方法与restore方法

Canvas动画制作实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂</title>
  6.     <link rel="stylesheet" href="../css/reset.css">
  7.     <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.     <style>
  9.         .wrap {
  10.             width: 1024px;
  11.             height: 800px;
  12.             margin: 0 auto;            
  13.         }
  14.         .wrap canvas {
  15.             border: 1px solid #999;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="wrap">
  21.         <canvas width="1024" height="600">
  22.             您的浏览器不支持canvas!
  23.         </canvas>    
  24.     </div>
  25.     <script>
  26.         var testCanvas = $("canvas")[0];
  27.         var context = testCanvas.getContext("2d");
  28.         var x = 0;
  29.         var y = 0;
  30.         var timer = null;
  31.  
  32.         // 思路:进行清画布 再次绘制(循环操作)
  33.  
  34.         /*
  35.          * 功能:Canvas动画绘制
  36.          * author:HTML5学堂、刘国利、陈能堡
  37.          *
  38.          */
  39.         function draw(){
  40.             // 不断改变绘制对象的水平位置
  41.             x++;
  42.             // 清除画布
  43.             context.clearRect(0, 0, 1024, 600);
  44.             context.beginPath();
  45.             context.fillStyle = "red";
  46.             context.arc(x, 150, 100, 0, 2 * Math.PI, true);
  47.             context.closePath();
  48.             // 绘制轮廓
  49.             context.stroke();
  50.             // 填充颜色
  51.             context.fill();
  52.         }
  53.         
  54.         // 设置计时器
  55.         setInterval(draw, 20);
  56.     </script>
  57. </body>
  58. </html>

效果图

Canvas动画制作

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端