引用：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篇 (二) 新功能介绍和测试
<canvas>是HTML5引入的一个新的元素，可以使用JavaScript来绘制图形、合成图象、以及做一些动画。<canvas>最先出现在Apple Mac OS X Dashboard中，也被应用于Safari，随着后来基于Gecko1.8的浏览器Firefox 1.5的加入变得流行起来，目前<canvas>是HTML 5标准规范的一部分。目前最新版本的主流浏览器都支持<canvas>，支持情况如下图：
一个简单的Canvas例子，代码如下：
- <!DOCTYPE HTML>
- <html>
- <canvas id="diagonal" style="border: 1px solid;" width="200" height="200">
- </canvas>
- </html>
- <script>
- function drawDiagonal() {
- // Get the canvas element and its drawing context
- var canvas = document.getElementById('diagonal');
- var context = canvas.getContext('2d');
- // Create a path in absolute coordinates
- context.beginPath();
- context.moveTo(100, 140);
- context.lineTo(140, 70);
- // Stroke the line onto the canvas
- context.stroke();
- }
- window.addEventListener("load", drawDiagonal, true);
- </script>
代码运行效果如图，通过绝对坐标画出一条线：
Canvas把整个画布用坐标值进行了表示，左上角为（0，0），依次沿着X轴和Y轴延伸。坐标图如下所示：
再看一个例子：
- <pre name="code" class="cpp"><html>
- <head>
- <script type="application/x-javascript">
- function draw() {
- var canvas = document.getElementById("canvas");
- if (canvas.getContext) {
- var ctx = canvas.getContext("2d");
- ctx.fillStyle = "rgb(200,0,0)";
- ctx.fillRect (10, 10, 55, 50);
- ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
- ctx.fillRect (30, 30, 55, 50);
- }
- }
- </script>
- </head>
- <body onload="draw();">
- <canvas id="canvas" width="150" height="150"></canvas>
- </body>
- </html>
- </pre>
运行效果如下图所示，分别创建了两个色块，对其进行颜色赋值和透明度设置：
相关代码 下载
•3. Canvas 动画
Canvas的动画功能是Flash的克星之一，结合了JavaScript和CSS3，可以说任何Flash能够做出的动画在Canvas中都可以实现。Canvas动画的原理和Flash类似：通过移动相应活动的图形来展示动画
如果是一个2D的canvas动画，那么在JavaScript中需要新建以下Object， 本例来源于KineticJS 2d JavaScript Library：
- this.canvas = document.getElementById(canvasId);
- this.context = this.canvas.getContext("2d");
- this.drawStage = undefined;
- this.listening = false;
- // Canvas Events
- this.mousePos = null;
- this.mouseDown = false;
- this.mouseUp = false;
- // Region Events
- this.currentRegion = null;
- this.regionCounter = 0;
- this.lastRegionIndex = null;
- // Animation
- this.t = 0;
- this.timeInterval = 0;
- this.startTime = 0;
- this.lastTime = 0;
- this.frame = 0;
- this.animating = false;
其动画部分代码：
- Kinetic_2d.prototype.isAnimating = function(){
- return this.animating;
- };
- Kinetic_2d.prototype.getFrame = function(){
- return this.frame;
- };
- Kinetic_2d.prototype.startAnimation = function(){
- this.animating = true;
- var date = new Date();
- this.startTime = date.getTime();
- this.lastTime = this.startTime;
- if (this.drawStage !== undefined) {
- this.drawStage();
- }
- this.animationLoop();
- };
- Kinetic_2d.prototype.stopAnimation = function(){
- this.animating = false;
- };
- Kinetic_2d.prototype.getTimeInterval = function(){
- return this.timeInterval;
- };
- Kinetic_2d.prototype.getTime = function(){
- return this.t;
- };
- Kinetic_2d.prototype.getFps = function(){
- return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
- };
- Kinetic_2d.prototype.animationLoop = function(){
- var that = this;
- this.frame++;
- var date = new Date();
- var thisTime = date.getTime();
- this.timeInterval = thisTime - this.lastTime;
- this.t += this.timeInterval;
- this.lastTime = thisTime;
- if (this.drawStage !== undefined) {
- this.drawStage();
- }
- if (this.animating) {
- requestAnimFrame(function(){
- that.animationLoop();
- });
- }
- };
读者可以从以下地址下载源码进行测试学习：下载地址。
更多的例子，
包括Canvas 3D动画，下载地址，Canvas动画是HTML5游戏开发最重要的工具，更多关于Canvas的信息将会和接下来的CSS3一起介绍。
本篇完。
参考资料："Pro. HTML5 Programing" http://www.kineticjs.com/ ...
相关文章：