HTML5画布(Canvas)【HTML5教程 - 第七篇】
2012-11-17 23:03:09| 发布: 未知| 浏览: 1311
Canvas是HTML5中的画布API，用来帮助大家在浏览器上快速的绘制图形图像。
Canvas是什么？HTML5 <canvas> 元素可以用来通过使用脚本来绘制图形图像。<canvas>元素只是一个图形的容器，你必须使用脚本来绘制图形。
一个canvas是一个可以绘制的HTML定义的区域，拥有高度和宽度等属性。
Canvas拥有几个绘制路径，矩形，圆形，字符和添加图片的方法。
浏览器支持IE9，Firefox，Opera，Chrome和Safari 5都支持这个<canvas>元素。
注意：IE8和更早的版本不支持canvas这个元素。
创建一个Canvas我们可以通过指定一个Canvas元素来指定画布，你可以指定宽度，高度和id，如下：
<canvas></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教程 - 第七篇：HTML5画布(Canvas)，转自：
如非特别注明，本站内容均为领悟书生原创，转载请务必注明作者和原始出处。
本文地址：
相关文章
精彩导读
热门资讯
关注我们
