GBin1专题之HTML5教程 - 第七篇：HTML5画布(Canvas)

日期：2012-4-23  来源：GBin1.com

Canvas是HTML5中的画布API，用来帮助大家在浏览器上快速的绘制图形图像。

Canvas是什么？

HTML5 <canvas> 元素可以用来通过使用脚本来绘制图形图像。<canvas>元素只是一个图形的容器，你必须使用脚本来绘制图形。

一个canvas是一个可以绘制的HTML定义的区域，拥有高度和宽度等属性。

Canvas拥有几个绘制路径，矩形，圆形，字符和添加图片的方法。

浏览器支持

IE9，Firefox，Opera，Chrome和Safari 5都支持这个<canvas>元素。

注意：IE8和更早的版本不支持canvas这个元素。

创建一个Canvas

我们可以通过指定一个Canvas元素来指定画布，你可以指定宽度，高度和id，如下：

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

使用Javascript来绘制，所有的绘图都在javascript中完成。如下：

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#202020";
    ctx.fillRect(0,0,150,75);
</script>

在线演示

其中javascript使用id来找到<canvas>对象：

var c=document.getElementById("myCanvas");

然后，创建一个context对象：

var ctx=c.getContext("2d");

getContext("2d")对象基于一个HTML5的内建对象，使用很多方法来绘制直线，矩形，圆形，字符和图片等等。

下面两行用来绘制一个黑色的矩形：

ctx.fillStyle="#202020";
ctx.fillRect(0,0,150,75)

上面fillStyle使得矩形颜色为暗黑色，fillRect用来指定矩形形状，位置和尺寸。

理解坐标

上例中fillRect属性拥有参数(0,0,150,75)。意思是从左上端(0,0)坐标画出一个150x75的矩形。

画布的X，Y参数用来定位绘制图形。你可以使用如下例子来查看你的鼠标坐标。

更多的Canvas例子

这里我们介绍了另外几个例子用来绘制图形。

绘制直线

在线演示

绘制圆形

在线演示

绘制渐变效果

在线演示

绘制图片

在线演示

HTML5 <canvas> 标签

标签
描述

<canvas> 用来通过javascript脚本绘制图形

 完整的2D画布参考

如果你想查询完整的2D画布参考，请访问我们的2D画布参考

来源：GBin1专题之HTML5教程 - 第七篇：HTML5画布(Canvas)