HTML5 :Canvas之基本用法

1. 标签

<canvas id="tutorial" width="150" height="150"></canvas>

canvas：本身相当于我们游戏开中所说的画布，默认是width 300 height 150

带2个属性：

    width ：制定画布的宽

    height：制定画布的高

id： 是html中每个标签自带的属性

2. 渲染上下文（Rendering Context）

<canvas> 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。

//获得dom模型中的canvas对象

var canvas = document.getElementById('tutorial');
//制定canvas的绘制内容为2d的方式

var ctx = canvas.getContext('2d');

3.简单示例

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