项目实训(十二):如何实现设置js画板的背景

因为项目的要求，我们的画板要求的功能是可以对现有的图片进行修改的功能，所以需要针对某张图片打开画板，然后下面自动就有该图片作为背景，然后医生可以在上面绘制标记等。

作为一个html小白，我首先想到的是以前在试用另一个画板的时候遇到过的<style>。

如图的代码让body的背景变成透明的，让v1的背景变成url括号里的那张图片。之后的三句分别代表不重复、位置固定和位于中心。如果没有后三句的话就会变成：

图片会重复铺满整个画布。因此后面三句还是必要的。

于是延续这个思路，我也把这个方法代到了新的画板里。经过一番搜寻，canvas并不能用<style>，但是因为新画板用了css，因此可以直接在css里改。

那到现在为止，就可以很好地实现我们想要的样子了，需要的图片会如愿出现在画布中央。但是这样又出现了一个新的问题，那就是在保存画作时，背景不会跟着一起保存，只有使用者画出的部分会被保存下来。如此一来就只能转变思路了。但是这也算给了我新的思路吧，我们可以在打开画板时由程序先把我们想改的图片画在画板上，清除的时候再画一次，就可以完美实现想要的效果了~

 html里一开始的那次绘制：

<script>
			(function(){
				var canvas = document.querySelector('#cavsImage');
				var ctx = canvas.getContext('2d');

				//canvas.width = 600;
				//canvas.height = 600;
				//canvas.style.border = '1px solid #ccc';

				//第一步，创建图片的dom对象
				var img1 = new Image();
				img1.src='123.png';//只要设置了src属性，当前img对象立即去加载图片。
				//第二步，图片加载完成后，把图片绘制到canvas上
				img1.onload = function() {
					ctx.drawImage(img1,30,30);
					//ctx.drawImage(img1,250,30,img1.width*1.2,img1.height*1.2);
					//for(var i=0;i<5;i++){
						//ctx.drawImage(img1,30+i*20,250+i*20,img1.width*0.8,img1.height*0.8);
					//}

					//绘制指定的裁剪图片
					//图片截取
					//参数： 1、图片对象,2、截取图片x坐标，3、截取图片Y坐标
					//4、截取图片宽，5、截取图片高，
					//6、7、绘制图片的X、y坐标， 8、9、绘制图片的宽高
					//ctx.drawImage(img1,15,70,70,70,350,350,210,210);
				};
			})();
		</script>

 js里的清除画布：

const clear = document.querySelector("#clear");
	clear.addEventListener("click", () => {
		// clearRect方法可以清空一定区域内的内容 填写的值为x坐标 y坐标 清除的宽度 和 高度 我们全部要清除 所以直接从左上角开始 宽高为画布的宽高了 再来试试
		ctx.clearRect(0, 0, 1280, 1080);
		var img1 = new Image();
		img1.src='123.png';
		ctx.drawImage(img1,30,30);
		// OK了
	});

 最终效果：