移动Web应用程序开发HTML5篇 (三) Canvas API

介绍

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

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

相关文章:

•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例子,代码如下:


[xhtml]<!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>[/xhtml]

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

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

再看一个例子:

<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>

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

相关代码 下载

•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/ ...

相关文章:


有关编译器优化的更完整信息,请参阅优化通知