html5 canvas（基本矩形）_html/css_WEB-ITnose

先从简单的开始

fillRect(x,y,width,height)

 在坐标x,y的位置加上一个宽，高   如：

fillRect(0,0,500,500)//在坐标0，0处加上一个宽高500的填充矩形

strokeRect(x,y,width,height)

  在坐标x,y的位置加上一个宽，高边框矩形

但是需要使用lineWidth,lineJoin,strokeStyle,miterLimit设置下面会给出矩形函数

clearRect(x,y,width,height)

 清除坐标x,y的位置宽，高的一块区域是起完全透明

感觉有点像用ps时候一个黑色的图层，拉一个矩形选框，然后按个delect的感觉一块透明

然后设置一下填充样式

context.fillStyle='#000000'    //填充颜色context.strokeStyle='#ff00ff'    //边框颜色

完整代码

 
 
你的浏览器无法使用canvas如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！

结果就是这样一个

如果对前面的结构不了解的话可以看我的上一篇http://www.cnblogs.com/LoveOrHate/p/4388321.html