31 canvas使用图片及设置背景

31 canvas使用图片及设置背景1使用图片在canvas中插入图片(需要image对象)1.canvas操作图片时，必须要等图片加载完才能操作2.drawImage(image, x, y, width, height)其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。这个方法多了2个参数：width 和 height，这两个参数用

丨Anna丨

13722人浏览 · 2020-10-29 14:30:48

丨Anna丨 · 2020-10-29 14:30:48 发布

31 canvas使用图片及设置背景

1 使用图片

在canvas中插入图片(需要image对象)
	1.canvas操作图片时，必须要等图片加载完才能操作
	2.drawImage(image, x, y, width, height)
		其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
		这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小


在canvas中设置背景(需要image对象)
	1.createPattern(image, repetition)
		image:图像源
		epetition:
			"repeat" 
			"repeat-x" 
			"repeat-y" 
			"no-repeat" 
			
	一般情况下，我们都会将createPattern返回的对象作为fillstyle的值

示例

	<head>
		<meta charset="UTF-8">
		<title>12_canvas中的变换放大</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="600" height="400">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			window.onload = function(){
				var canvas = document.querySelector("#test");
				if(canvas.getContext){
					var ctx = canvas.getContext("2d");
					var img = new Image();
					img.src = "image/timg.jpg";
					img.onload = function(){
						draw();
					}
				}
				
				
				function draw(){
					ctx.drawImage(img,0,0,img.width,img.height);
				}
			}
		</script>
	</body>

效果

2 在canvas中设置背景

语法

在canvas中设置背景(需要image对象)
	1.createPattern(image, repetition)
		image:图像源
		epetition:
			"repeat" 
			"repeat-x" 
			"repeat-y" 
			"no-repeat" 
			
	一般情况下，我们都会将createPattern返回的对象作为fillstyle的值。然后使用矩形进行填充

示例

	<head>
		<meta charset="UTF-8">
		<title>15_canvas使用图片做背景</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="600" height="400">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			window.onload = function(){
				var canvas = document.querySelector("#test");
				if(canvas.getContext){
					var ctx = canvas.getContext("2d");
					var img = new Image();
					img.src = "image/timg.jpg";
					img.onload = function(){
						draw();
					}
				}
				
				
				function draw(){
					var pattern = ctx.createPattern(img,"no-repeat")
					ctx.fillStyle=pattern;
					ctx.fillRect(0,0,600,400)
				}
			}
		</script>
	</body>

效果

3 精灵图片

语法

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明：width 绘制图片的宽度，  height：绘制图片的高度
    如果指定宽高，最好成比例，不然图片会被拉伸
    等比公式：  toH = Height * toW   /  Width;  //等比 
             设置高 = 原高度 * 设置宽/ 原宽度;
    sx,sy 裁剪的左上角坐标，
    swidth：裁剪图片的高度。 sheight:裁剪的高度 
    其他同上

示例

	<head>
		<meta charset="UTF-8">
		<title>canvas精灵图片</title>
		<style>
			canvas{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				border: 1px solid #CCC;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您当前浏览器暂不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.getElementById("test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				var img = new Image();
				img.src = "image/NPC-edekillangle.png";
				img.onload = function(){
					ctx.save();
					ctx.beginPath();
					ctx.drawImage(img,0,0,40,65,100,100,40,65);
					ctx.restore();
					
					ctx.save();
					ctx.beginPath();
					ctx.drawImage(img,40,65,40,65,150,100,40,65);
					ctx.restore();
				}
				
			}
		</script>
	</body>

效果