8 canvas画布清空的方式方法1 方法2 区别重置宽高方式擦出画布, 不但清除画布, 还会重置画笔的样式 lear

方法1

Canvas.width = 1000;
Canvas.height = 500;

方法2

clearRect();
cxt.clearRect(0, 0, 1000, 500);

区别

重置宽高方式擦出画布, 不但清除画布, 还会重置画笔的样式
learRect方式擦除画布, 只清除画布, 保留画笔的样式

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>08_擦除Canvas画布</title>
		<style type="text/css">
			#Canvas {
				border: 1px solid red;
				display: block;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<canvas id="Canvas" width="1000" height="500">请升级浏览器</canvas>
	<script type="text/javascript">
			var Canvas = document.getElementById("Canvas");
			
			//1. 设置宽高
			Canvas.width = 1000;
			Canvas.height = 500;
			
			//2. 获取对象上下文对象(核心), 画笔
			var cxt = Canvas.getContext("2d");
			
			/*
			 * 3. 擦除canvas
			 *  3.1 重置canvas画布的宽和高
			 * 	3.2 clearRect()
			 */
			
			
			
			cxt.arc(500, 250, 100, 0, 2*Math.PI, false);
			cxt.fillStyle = "blue";
			cxt.fill();
			
			// 重置画布的宽高
//			Canvas.width = 1000;
//			Canvas.height = 500;
			
			
			// clearRect()
			cxt.clearRect(0, 0, 1000, 500);
			
			
//			Canvas.onmousedown = function(){
//				window.onmousemove = function(e){
//					var even =  e || event;
//					cxt.clearRect(even.clientX - 
//Canvas.offsetLeft - 15, even.clientY - Canvas.offsetTop - 15, 30, 30);
//				}
//			}
//			Canvas.onmouseup = function(){
//				window.onmousemove = null;
//			}


			// 两种擦除方式的区别
			cxt.fillRect(700, 100, 100, 100);
			/*
			 * 重置宽高方式擦出画布, 不但清除画布, 还会重置画笔的样式
			 * clearRect方式擦除画布, 只清除画布, 保留画笔的样式
			 */
		</script>
	</body>
</html>