HTML画布

HTML 5 画布

1.HTML5画布介绍

<canvas>是HTML5中新出现的一个元素。就是可以通过JS绘制图形。

画布<canvas>是一个没有内容也没有边框的矩形区域。我们可以控制里面的每一个像素。

目前浏览器对<canvas>的支持情况如下

IE	Firefox	Chrome	Opera	Safari	IPhone	Android
版本7.0以上	版本3.0以上	版本3.0以上	版本3.0以上	版本10.0以上	版本1.0以上	版本1.0以上

2.HTML5画布实例

基本canvas元素的定义方法

<canvas id="fistcancas" style="border:2px dotted red;" width="300" height="300">

</canvas>

画布的初始化是空白的，什么都没有。canvas只有两个属性:width和height，这些属性可选并且可以通过JS或者css来控制,默认值是width=300,height=150

下例是在画布上画一个100*100的正方形，填充色为红色。

<canvas id="myCanvas" width="200" height="100" style="border:2px dotted blue;">
您的浏览器不支持。
</canvas>

<script type="text/javascript">

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

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

									    cxt.fillStyle = "#FF0000";

									    cxt.fillRect(0, 0, 150, 150); 

									</script>

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

它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图需要调用的函数。

getContext()接受一个用于描述其类型的值作为参数。也就是后面的“2d”或者“3d”(目前不支持)

cxt.fillStyle = "#00ff00"; 是填充颜色

cxt.fillRect(0, 0, 150, 150);是可以绘制带填充的矩形。

x, y, width, height;前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。