博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

HTML5 :Canvas之基本用法

Posted on 2011-12-08 19:52  zhangweia  阅读(1287)  评论(0编辑  收藏  举报

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>