我有一个覆盖整个屏幕的 Canvas 的整个宽度和高度的图像。问题是，当代码在具有不同分辨率(宽度和高度)的计算机上运行时，图像不会调整到该屏幕的正确高度和宽度。它保持我在 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 属性后得到您想要的。
编辑:正如下面的评论中所指出的，我添加了一些额外的代码来监听窗口调整大小，这将根据需要调整 Canvas 图像的尺寸。调整大小时，此解决方案确实在我的屏幕上闪烁了一下，因此存在潜在的缺点。
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>关于javascript - 在 HTML5 Canvas 中调整图像大小以适应 JS 中的任何显示器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53191329/