HTML5 Canvas 教程(一)


1.1.1 HTML5 Canvas 的元素

HTML5页面里, canvas就是像<div>, <a>, 或 <table>之类的一种标签,所不同的是, canvas需要用Javascript来渲染。要使用canvas,我们就需要在HTML5文件的适当位置添加 canvas标签,然后创建一个Javascript初始化函数,使这个函数在页面加载的时候就执行,同时在函数里用调用 HTML5 Canvas APIcanvas上画图就可以了。比如我们像下面这样添加一个id为 myCanvascanvas标签:

<body>

  <canvas id="myCanvas"></canvas> </body>

然后添加初始化Javascript函数:

<!DOCTYPE HTML>

<html>

  <head>

    <script>

      window.onload = function() {

        var canvas = document.getElementById("myCanvas");         var context = canvas.getContext("2d"); 

        // 在此添加绘图代码

      };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

  </body>

</html>

HTML5 Canvas 有关元素的说明

  上述代码将在本文后续中作为 HTML5 Canvas程序的基本模板。就像其他HTML标签一样,我们也

可以用canvas标签的 height 和 width属性为canvas指定其在页面上高度和宽度。在初始化

Javascript函数中,我们可以用canvas标签的id获得canvasDOM对象,并用getContext() 方法获得这个canvas2d”上下文对象,其后的绘图操作都将以此上下文对象为基础。

上一篇 下一篇

评论



分享