你的位置:首页 > 网页设计

[网页设计]html5 canvas(基本矩形)


先从简单的开始

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'  //边框颜色

 

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html 

 

结果就是这样一个

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