在HTML5画布中调整图像大小以适应JS中的任何监视器

我有一个覆盖整个屏幕的画布的整个宽度和高度的图像。问题是，当代码在具有不同分辨率(宽度和高度(的计算机上运行时，图像不会调整到屏幕的适当高度和宽度。它保持了我在JS中设置的原始大小。我是JavaScript的新手，所以我能为这张图片提供任何帮助，以不同的分辨率调整大小，都将是令人惊叹的。谢谢

//Global Canvas
var canvas = document.querySelector('.canvas1');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
//Functions
function load_image1() {
	"use strict";
	var base_image;
	base_image = new Image();
	base_image.src = ['https://postimg.cc/tnGDb1vD'];
	
	base_image.onload = function(){
c.drawImage(base_image, (window.innerWidth - 1700), -100, 1920, 1080);
};
}

@charset "utf-8";
/* CSS Document */
body {
	margin: 0;	
}
.canvas1 {
	margin: 0;
	display: block;
}

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sylvanas</title>
	
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	
	<canvas class="canvas1">
	</canvas>
	<!--<canvas class="canvas2">
	</canvas>-->
	<script src="script.js"></script>	
</body>
</html>

您可以调整一些c.drawImage()参数，以获得使用一些window属性后的结果。

编辑：正如下面的评论中所指出的，我添加了一些额外的代码来监听窗口的大小调整，这将根据需要调整画布图像的尺寸。这个解决方案在调整大小时确实会在我的屏幕上闪烁一点，所以有一个潜在的缺点。

c.drawImage(base_image, 0, 0, canvas.width, canvas.height);

JSFiddle：http://jsfiddle.net/gucr5m1b/4/

var canvas = document.querySelector('.canvas1');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
function load_image1() {
	"use strict";
	var base_image = new Image();
	base_image.src = ['http://i.imgur.com/8rmMZI3.jpg'];
	base_image.onload = function() {
c.drawImage(base_image, 0, 0, canvas.width, canvas.height);
	};
}
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
load_image1();
}
function startCanvas() {
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
}
startCanvas();

@charset "utf-8";
/* CSS Document */
body {
	margin: 0;	
}
.canvas1 {
	margin: 0;
	display: block;
}

<canvas class="canvas1"></canvas>

相关内容

最新更新

热门标签：