html5 canvas

引用：http://software.intel.com/zh-cn/blogs/2012/02/22/webhtml5-canvas-api/

介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。

本篇是HTML5介绍的第三篇，主要介绍HTML5的Canvas API。

相关文章：

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

•1. Canvas API介绍

<canvas>是HTML5引入的一个新的元素，可以使用JavaScript来绘制图形、合成图象、以及做一些动画。<canvas>最先出现在Apple Mac OS X Dashboard中，也被应用于Safari，随着后来基于Gecko1.8的浏览器Firefox 1.5的加入变得流行起来，目前<canvas>是HTML 5标准规范的一部分。目前最新版本的主流浏览器都支持<canvas>，支持情况如下图：

•2. Canvas 入门

一个简单的Canvas例子，代码如下：

- collapse sourceview plaincopy to clipboardprint?
  1. <!DOCTYPE HTML>  
  2.   
  3. <html>  
  4.   
  5. <canvas id="diagonal" style="border: 1px solid;" width="200" height="200">  
  6. </canvas>  
  7. </html>  
  8. <script>  
  9. function drawDiagonal() {  
  10. // Get the canvas element and its drawing context  
  11. var canvas = document.getElementById('diagonal');  
  12. var context = canvas.getContext('2d');  
  13. // Create a path in absolute coordinates  
  14. context.beginPath();  
  15. context.moveTo(100, 140);  
  16. context.lineTo(140, 70);  
  17. // Stroke the line onto the canvas  
  18. context.stroke();  
  19. }  
  20. window.addEventListener("load", drawDiagonal, true);  
  21. </script>  

代码运行效果如图，通过绝对坐标画出一条线：

Canvas把整个画布用坐标值进行了表示，左上角为（0，0），依次沿着X轴和Y轴延伸。坐标图如下所示：

再看一个例子：

- collapse sourceview plaincopy to clipboardprint?
  1. <pre name="code" class="cpp"><html>  
  2.  <head>  
  3.   <script type="application/x-javascript">  
  4.     function draw() {  
  5.       var canvas = document.getElementById("canvas");  
  6.       if (canvas.getContext) {  
  7.         var ctx = canvas.getContext("2d");  
  8.   
  9.         ctx.fillStyle = "rgb(200,0,0)";  
  10.         ctx.fillRect (10, 10, 55, 50);  
  11.   
  12.         ctx.fillStyle = "rgba(0, 0, 200, 0.5)";  
  13.         ctx.fillRect (30, 30, 55, 50);  
  14.       }  
  15.     }  
  16.   </script>  
  17.  </head>  
  18.  <body onload="draw();">  
  19.    <canvas id="canvas" width="150" height="150"></canvas>  
  20.  </body>  
  21. </html>  
  22. </pre>  

运行效果如下图所示，分别创建了两个色块，对其进行颜色赋值和透明度设置：

相关代码 下载

•3. Canvas 动画

Canvas的动画功能是Flash的克星之一，结合了JavaScript和CSS3，可以说任何Flash能够做出的动画在Canvas中都可以实现。Canvas动画的原理和Flash类似：通过移动相应活动的图形来展示动画

如果是一个2D的canvas动画，那么在JavaScript中需要新建以下Object， 本例来源于KineticJS 2d JavaScript Library：

- collapse sourceview plaincopy to clipboardprint?
  1.     this.canvas = document.getElementById(canvasId);  
  2.     this.context = this.canvas.getContext("2d");  
  3.     this.drawStage = undefined;  
  4.     this.listening = false;  
  5.   
  6.     // Canvas Events  
  7.     this.mousePos = null;  
  8.     this.mouseDown = false;  
  9.     this.mouseUp = false;  
  10.   
  11.     // Region Events  
  12.     this.currentRegion = null;  
  13.     this.regionCounter = 0;  
  14.     this.lastRegionIndex = null;  
  15.   
  16.     // Animation  
  17.     this.t = 0;  
  18.     this.timeInterval = 0;  
  19.     this.startTime = 0;  
  20.     this.lastTime = 0;  
  21.     this.frame = 0;  
  22. this.animating = false;  

 

其动画部分代码：

- collapse sourceview plaincopy to clipboardprint?
  1. Kinetic_2d.prototype.isAnimating = function(){  
  2.     return this.animating;  
  3. };  
  4.   
  5. Kinetic_2d.prototype.getFrame = function(){  
  6.     return this.frame;  
  7. };  
  8. Kinetic_2d.prototype.startAnimation = function(){  
  9.     this.animating = true;  
  10.     var date = new Date();  
  11.     this.startTime = date.getTime();  
  12.     this.lastTime = this.startTime;  
  13.   
  14.     if (this.drawStage !== undefined) {  
  15.         this.drawStage();  
  16.     }  
  17.   
  18.     this.animationLoop();  
  19. };  
  20. Kinetic_2d.prototype.stopAnimation = function(){  
  21.     this.animating = false;  
  22. };  
  23. Kinetic_2d.prototype.getTimeInterval = function(){  
  24.     return this.timeInterval;  
  25. };  
  26. Kinetic_2d.prototype.getTime = function(){  
  27.     return this.t;  
  28. };  
  29. Kinetic_2d.prototype.getFps = function(){  
  30.     return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;  
  31. };  
  32. Kinetic_2d.prototype.animationLoop = function(){  
  33.     var that = this;  
  34.   
  35.     this.frame++;  
  36.     var date = new Date();  
  37.     var thisTime = date.getTime();  
  38.     this.timeInterval = thisTime - this.lastTime;  
  39.     this.t += this.timeInterval;  
  40.     this.lastTime = thisTime;  
  41.   
  42.     if (this.drawStage !== undefined) {  
  43.         this.drawStage();  
  44.     }  
  45.   
  46.     if (this.animating) {  
  47.         requestAnimFrame(function(){  
  48.             that.animationLoop();  
  49.         });  
  50.     }  
  51. };  

 

读者可以从以下地址下载源码进行测试学习：下载地址。

更多的例子，

包括Canvas 3D动画，下载地址，Canvas动画是HTML5游戏开发最重要的工具，更多关于Canvas的信息将会和接下来的CSS3一起介绍。

本篇完。

参考资料："Pro. HTML5 Programing" http://www.kineticjs.com/ ...

相关文章：

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

posted @ 2012-02-28 22:07  镇水古月  阅读(301)  评论(0)  编辑  收藏  举报