• 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篇 (二) 新功能介绍和测试
  • 相关阅读:
    基于索引的MySQL优化
    SQL优化：
    in的对象选择（子查询还是List集合），in 的优化，in与exists
    嵌套查询及其作用域：
    group by实现原理及其作用
    批量打回未报bug修复
    解析Job，bpmn文件的小项目总结
    用户短时间内多次提交与保存带来的问题
    嵌套连接
    多范围读取优化
  • 原文地址：https://www.cnblogs.com/sode/p/2372514.html
Copyright © 2020-2023  润新知