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 xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>矩形</title>

<script src="js/modernizr.js"></script>

</head>



<body>

<script type="text/javascript">

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)   //清除区域的位置

}

	

}





</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!!

</canvas>

</body>

</html>

 

html5 canvas(基本矩形)结果就是这样一个

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

 

你可能感兴趣的:(html5 canvas)