首页风格
门户
博客

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

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

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

Canvas是什么?

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

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

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

浏览器支持

iefirefoxchromeoperasafari

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)

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐