您现在的位置：首页 > 教案模板 > 正文

html5 canvas（基本矩形）

2019-08-24 15:02 网络整理教案网

如图在矩形abcd中_矩形面积公式_矩形

先从简单的开始

fillRect(x,y,width,height)

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

如图在矩形abcd中_矩形_矩形面积公式

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

strokeRect(x,y,width,height)

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

如图在矩形abcd中_矩形_矩形面积公式

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

clearRect(x,y,width,height)

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

如图在矩形abcd中_矩形面积公式_矩形

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

然后设置一下填充样式

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

矩形_如图在矩形abcd中_矩形面积公式

完整代码

<!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（基本矩形）

教案模板排行

教案模板看点