html5canvas（基本矩形）_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'    //边框颜色 

完整代码

     矩形      window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){	canvasApp();}function canvasSupport(){	return Modernizr.canvas;}function canvasApp(){	if(!canvasSupport()){		return;	}else{		var theCanvas = document.getElementById('canvas')		var context = theCanvas.getContext("2d")	}	drawScreen();    function drawScreen(){	context.fillStyle="#000000";   //填充黑色	context.strokeStyle='#ff00ff'     //边框为粉色	context.lineWidth=2;              //边框宽度        context.fillRect(10,10,40,40)     //矩形        context.strokeRect(0,0,60,60)    //边框出现的位置        context.clearRect(20,20,20,20)   //清除区域的位置}	}  你的浏览器无法使用canvas如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！    

结果就是这样一个

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

查看更多关于html5canvas（基本矩形）_html/css_WEB-ITnose的详细内容...