关于案例的问题

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成名片</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="left">
<div>
<input type="text" placeholder="姓名" id="name">
<input type="text" placeholder="地址" id="address">
<input type="text" placeholder="职业" id="work">
<input type="text" placeholder="口号" id="call">
</div>
<input type="button" id="progress" class="progress" value="生成口号">
</div>
<div class="right">
<canvas id="canvas" class="canvas" width="600px" height="100px">
您的浏览器不支持canvas
</canvas>
<canvas id="offCanvas" class="canvas" width="600px" height="100px">
您的浏览器不支持canvas
</canvas>
</div>
</div>
<script src="style.js"></script>
</body>
</html>

Css代码

* {
	margin: 0;
	padding: 0;
}
.main {
	width: 1200px;
	height: 400px;
	margin: 100px auto;
}
/*输入信息栏*/
.left {
	float: left;
	width: 400px;
	height: 400px;
	background: gray;
}
.right {
	float: right;
	width: 800px;
	height: 400px;
	background: yellow;
}
.left > div {
	margin: 50px;
}
.left > div > input {
	display: block;
	appearance:none;
	outline: medium;
	/*outline:medium用于去除输入框获得焦点所产生的蓝色边框*/
	width: 300px;
	height: 30px;
	margin: 30px auto;
	border-radius: 20px;
	border:1px solid white;
	padding-left: 20px;
}
.left > .progress {
	display: block;
	width: 150px;
	height: 30px;
	margin: 0 auto;
	outline: medium;
	color: white;
	background: black;
	border:none;
	border-radius: 20px;
	cursor: pointer;
}

/*名片显示栏*/
.canvas {
	margin: 100px 0 0 100px;
	background:linear-gradient(to right,black 60%,gray 100%);
}

Js代码

(function () {
	// 画布
	var canvas = document.querySelector("#canvas");
	var ctx = canvas.getContext("2d");

	var offCanvas = document.querySelector("#offCanvas");
	var offCtx = offCanvas.getContext("2d");

	var viewName = "请输入姓名";
	var viewAddress = "请输入地址";
	var viewWork = "请输入职业";
	var viewCall = "请输入口号";

	var radialX = 10,
		radialY = -10,
		dir = 1;
	offCtx.fillStyle = "rgba(255,255,255,0.5)";
	setInterval(function () {
		radialY += 10 * dir;
		offCtx.clearRect(0,0,offCanvas.width,offCanvas.height);
		offCtx.beginPath();
		offCtx.arc(radialX,radialY,10,0,Math.PI * 2,true);
		offCtx.fill();
		if (radialY >= offCanvas.height + 20) {
			radialY = -10;
		}else if (radialY <= -30) {
			dir = 1;
		}
	},200);

	function view() {
		var img = new Image();
		img.src = "59859f4d00014f1503000100.jpg";
		img.onload = function () {
			ctx.drawImage(img,0,0,100,100,-30,-10,120,120);
		}
		ctx.save();

		ctx.beginPath();
		ctx.font = "30px 微软雅黑"
		ctx.fillStyle = "white";
		ctx.fillText(viewName,110,35);

		ctx.beginPath();
		ctx.font = "20px 微软雅黑";
		ctx.fillText(viewAddress,110,60);

		ctx.beginPath();
		ctx.font = "20px 微软雅黑";
		ctx.fillText(viewWork,110,85);

		ctx.beginPath();
		ctx.shadowOffsetX = 0;
		ctx.shadowOffsetY = 10;
		ctx.shadowColor = "rgba(0,0,0,0.8)";
		ctx.translate(400,0);
		ctx.rotate(-(Math.PI / 18));
		ctx.font = "20px 微软雅黑";
		ctx.fillText(viewCall,0,65);

		var callWidth = ctx.measureText(viewCall).width;
		ctx.lineWidth = 2;
		ctx.strokeStyle = "white";
		ctx.moveTo(2, 90);
		ctx.quadraticCurveTo(7, 70, callWidth, 70);
		ctx.stroke();
		ctx.restore();
	}
	view();

	// 信息显示
	var name = document.querySelector("#name");
	var address = document.querySelector("#address");
	var work = document.querySelector("#work");
	var call = document.querySelector("#call");
	var progress = document.querySelector("#progress");
	progress.onclick = function () {
		if (name.value == "" || address.value == "" || work.value == "" || call.value == "") {
			alert("请将信息填写完整");
		}else {
			ctx.clearRect(0,0,600,100);
			viewName = name.value;
			viewAddress = address.value;
			viewWork = work.value;
			viewCall = call.value;
			view();
		}
	}
})();

图片：

问题：为什么ctx.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,0,0,canvas.width,canvas.height);放在定时器里面能运行，放在外面就不管用了呢？

帅气的灯泡 2018-03-12

源自：HTML5 Canvas绘图基础 9-3 完成案例动画部分

收起

2回答

一路电光带火花回答被采纳获得+3积分 2018-03-13 17:26:09

是呀，第二个canvas画布是动态的，但是应该把静态的作为离屏添加到动态上面，如果你ctx.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,0,0,canvas.width,canvas.height);这么写，就是把动态的作为离屏添加的动态的上去了，测试是不成功的，或者你如果测试成功了，可以粘贴过来，大家分享下。所以你可以把静态的作为离屏添加到动态上面。

还有就是要使用定时器才能实现雪花效果，但是定时器中也有清除呀，你如果把添加离屏的操作写在计时器外面，那么只执行一次就被清除掉了，所以才需要在计时器中，清除一次，就添加一次。

收起回答