Html5-Canvas使用方法

最新推荐文章于 2024-08-14 15:45:18 发布

iteye_14352

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量149

点赞数

分类专栏： javascript html html5 文章标签： javascript html5 html ViewUI

本文链接：https://blog.csdn.net/iteye_14352/article/details/82099928

版权

html 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

原文参见：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对象进行方法调用。

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

开始划线：ctx.beginPath();
指定线的起点：ctx.moveTo(20, 20);
指定线的终点：ctx.lineTo(120, 20);
指定线的终点：ctx.lineTo(120, 120);
指定线的终点：ctx.lineTo(20, 120);
关闭画下的线：ctx.closePath();
通过线将画出的图形描画出来：ctx.stroke();

就像这样，如果想要划线的时候，就可以重复上面的步骤。

3~5. 步使用的lineTo方法，是从现在的坐标开始，到参数指定的坐标为止，画一条直线。

6. 步使用的closePath方法，是将画出的图形自动用直线进行闭合。当然可以使用ctx.lineTo(20, 20)来替换closePath()，不过通过closePath就不需要指定坐标的位置，代码也简单一些。

7. 步的stroke方法，是将画出的图像用线来描画出来。如果不调用这个方法，在浏览器上就看不到想画的图形。如果想以填充的方式画图的话，就用fill方法替换stroke方法。也就是ctx.fill()。

这个例子中，只使用了画直线的lineTo方法，另外还有画矩形的rect方法，弧形的arc方法，二次曲线的quadraticCurveTo方法，贝塞尔曲线的ezierCurveTo方法等等。详细请参见:Canvas参照。

4. 坐标系

上个例子当中个，在moveTo方法，lineTo等方法中指定了坐标。Canvas的坐标起点是从Canvas标签的左上角开始计算的。<canvas width="400" height=“300”>的坐标系如下图所示：

以左上角为起点，向右为X轴，向下为Y轴。左上角的坐标为(0, 0)，右下角的坐标为(400, 300)。

通过Canvas不仅可以划线，也有其它画各种图形的方法。下一节中，将会介绍另外利用canvas画图的另外几个方法。 >>描绘各种图形

iteye_14352

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5-Canvas使用方法

原文参见：http://www.html5.jp/canvas/how.html 本文介绍Canvas使用时的准备和简单的使用方法。 1. 下载ExplorerCanvas因为IE不支持Canvas，所以需要下载Google提供的ExplorerCanvas JS类库。到2009/03/24是为止，ExplorerCanvas的最新版本是Release3。下载exc...
复制链接

扫一扫

专栏目录