Html5-Canvas使用方法 -

peterlij

浏览: 61083 次
性别:
来自: 西安

最近访客更多访客>>

飞天奔月

a964208170

qq85609655

yuanyuan7891

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Html5-Canvas使用方法

博客分类：

javascript
html
html5

javascript html5 html

原文参见：http://www.html5.jp/canvas/how.html

本文介绍Canvas使用时的准备和简单的使用方法。

1. 下载ExplorerCanvas

因为IE不支持Canvas，所以需要下载Google提供的ExplorerCanvas JS类库。

到2009/03/24是为止，ExplorerCanvas的最新版本是Release3。下载excanvas_r3.zip之后，进行解压，会看到excanvas.js文件，实际使用的时候用到的就是这个文件。把这个文件放置到与需要使用Canvas的Html文件相同的路径下。

2. Html的准备

在使用Canvas的html文件中，给head元素中添加script元素来加载excanvas.js文件。然后，在想使用canvas画图的地方添加Canvas元素。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="ja" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Canvas</title>
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  </head>
  <body>
    <h1>Canvas</h1>
    <canvas id="canvassample" width="140" height="140"></canvas>
  </body>
</html>

script标签被包围着，这样只有IE认识，其他浏览器都相当于注释掉了。因为对于IE之外的浏览器，excanvas.js是不起作用的，所以为了防止多余的文件下载，这也是一个不错的方法。如果不用这种方法，通过script标签即使下载了excanvas.js，对于IE之外的浏览器也不会有问题。

然后，在想画图的地方，添加canvas标签，canvas是Html5新规定的标签。这个标签使用到的属性只包含，表示框区间的width和height属性。这两个属性都不是必须的，如果没有指定它们，就使用不同浏览器的默认值。Firefox的默认值是300*150。

3. JavaScript框架

Canvas使用JS进行画图，下面的例子画了一个正方形。让我们通过这个例子来看看Canvas的使用方法。

onload = function() {
  draw();
};
function draw() {
  /* canvas标签的节点对象 */
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  /* 2D上下文 */
  var ctx = canvas.getContext('2d');
  /* 华正方形 */
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(120, 20);
  ctx.lineTo(120, 120);
  ctx.lineTo(20, 120);
  ctx.closePath();
  ctx.stroke();
}

首先拿到canvas标签的节点对象，这里使用的是Dom的getElementById方法，当然也可以使用getElementByTagName。

拿到canvas标签的节点对象后，必须进行检查。在这个例子当中，如果canvas对象不存在或者没有getContext方法的时候，也就是不支持canvas的浏览器，就不进行任何处理。

getContext方法是Html5针对canvas定义的Dom新方法中的一个。对于IE浏览器，通过excanvas.js，getContext方法也定义好了。

getContext方法只接受参数“2D”，将来或许会支持"3D"，现在只支持“2D”。将通过getContext方法取得的2D上下文对象赋给ctx对象，然后，在画图的时候，就通过ctx对象进行方法调用。

那么，下面，就看看实际画图的方法：