Canvas-2d clearRect

最新推荐文章于 2022-05-12 12:25:07 发布

清静清源

最新推荐文章于 2022-05-12 12:25:07 发布

阅读量157

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_35068659/article/details/113512246

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

语法

context.clearRect(x, y, width, height);

参数

x - ^Number - 矩形左上角x坐标
y - ^Number - 矩形左上角y坐标
width - ^Number - 被清除的矩形width宽度
height - ^Number - 被清除的矩形height宽度

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function drawImage(id) {
				var canvas = document.getElementById(id);
				if (canvas == null) {
					return false;
				}
				var context = canvas.getContext('2d');
				var img = new Image();
				img.onload = function() {
					context.drawImage(img, 0, 0, 200, 200);
					context.clearRect(50, 50, 50, 50);
				}
				img.src="img/helloMyCanvas.jpg";
			}
		</script>
	</head>
	<body onload="drawImage('canvas')">
		<canvas id="canvas" width="200" height="200"></canvas>
	</body>
</html>