html5——canvas画方块功能函数

画布这个标签着实是个好东西，它灵活的和javascript结合使用可以在页面上绘制各种动态或者是静态图像，减少制作网页对其它工具的依赖性。

 首先是建立这个画布，其实和其它标签一样<canvas id="canvasIdName" width="" height=""></canvas>,标签之间可以写入提示信息。如何在javascript中获得canvas元素，可以通过var canvas=document.getElementById('canvasIdName').getContext('2d')；getContext方法还可以用来检测浏览器是否支持canvas绘图；画布是按坐标系来确定位置的，而页面的左上角是坐标系的原点，向右是x轴正方向，向下是y轴正方向。对于画方形，实现画出方形的方法：fillRect(pos-x,pos-y,width,height)，当只是引用这个方法的时候便会在页面指定的位置创建相应大小的方形，在没有设置图形样式时，图形填充颜色的缺省值是黑色。

当然它还提供了很多有用的效果（这些效果不仅可以在绘制方形是使用，其它图形也可以使用），这些效果需要在创建图形之前设置。这些效果的属性有：

• strokeStyle：设置图形的边线的颜色或样式
• fillSty：设置图形内部填充的颜色或样式
• shadowOffsetX/shadowOffsetY：设置图形阴影的偏移量
• shadowBlur：设置图形的模糊度

除了这些属性之外还有一些方法：

• creatLinearGradient(x1,y1,x2,y2)：创建图形的线性填充
• createRadialGradient(x1,y1,x2,y2)：创建图形的放射状填充（其中(x1,y1),(x2,y2)是渐变的起点和终点。它们可以通过addColorStop(stop,color)方法添加渐变过程中的颜色，其中stop是0.0~1.0之间的值，是渐变过程中的节点；color是从这点开始的颜色。）

绘制方形除了fillRect方法，还有clearRect(pos-x,pos-y,width,heingt)和strokeRect(pos-x,pos-y,width,heingt)。clearRect方法是清空指定方形区域内的所有像素，变为透明状。strokeRect方法和lineWidth结合使用能绘制出带边线的方形。