html5 rect()、fillrect()、strokeRect()的区别

最新推荐文章于 2021-08-10 17:19:06 发布

xingyemeng1202

最新推荐文章于 2021-08-10 17:19:06 发布

阅读量9.6k

点赞数 6

分类专栏： html

本文链接：https://blog.csdn.net/u013182438/article/details/65630287

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.rect() 方法是单纯的画出一个矩形框，调用stroke() 或 fill()后才会真正作用于画布。

例如：

<!DOCTYPE html>
<html>
	<head>
		<title>canvas test</title>
	</head>
	<body>
		<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
			your browser does not support HTML5 canvas tag!
		</canvas>
		<script>
			var c = document.getElementById('mytest');
			var ctx = c.getContext('2d');
			ctx.rect(0,0,100,50);    //仅仅是画出一个区域
			ctx.fillStyle = 'red';
			ctx.fill();
		</script>
	</body>
</html>

样式：

2.fillRect() 方法是画出一个有填充颜色的矩形框（默认是黑色的）

例如：

<!DOCTYPE html>
<html>
	<head>
		<title>canvas test</title>
	</head>
	<body>
		<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
			your browser does not support HTML5 canvas tag!
		</canvas>
		<script>
			var c = document.getElementById('mytest');
			var ctx = c.getContext('2d');
			//ctx.rect(0,0,100,50);
			ctx.fillStyle = 'red';
			ctx.fillRect(0,0,100,50);  //如果不定义fillstyle，那么会显示默认的黑色
		</script>
	</body>
</html>

样式：

3.strokeRect() 方法是用一个预定义的笔触画出一个矩形框，你就可以想成使用一直有颜色的画笔去画一个矩形

例如

<!DOCTYPE html>
<html>
	<head>
		<title>canvas test</title>
	</head>
	<body>
		<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
			your browser does not support HTML5 canvas tag!
		</canvas>
		<script>
			var c = document.getElementById('mytest');
			var ctx = c.getContext('2d');
			//ctx.rect(0,0,100,50);
			//ctx.fillStyle = 'red';
			ctx.strokeRect(20,20,100,50);
		</script>
	</body>
</html>

样式：

xingyemeng1202

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
html5 rect()、fillrect()、strokeRect()的区别

1.rect() 方法是单纯的画出一个矩形框例如： canvas test your browser does not support HTML5 canvas tag! var c = document.getElementById('mytest'); var ctx = c.getContext('2d'); ctx.rect(
复制链接

扫一扫