Изменение размера изображения в HTML5 Canvas, чтобы соответствовать любому монитору в JS - PullRequest
Новая
       1

Изменение размера изображения в HTML5 Canvas, чтобы соответствовать любому монитору в JS

0 голосов
/ 07 ноября 2018

У меня есть изображение, которое покрывает всю ширину и высоту холста, который покрывает весь экран. Проблема в том, что когда код запускается на компьютере с другим разрешением (шириной и высотой), изображение не подстраивается под правильную высоту и ширину этого экрана. Это остается оригинальным размером, который я установил в 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>

1 Ответ

0 голосов
/ 07 ноября 2018

Вы можете настроить некоторые параметры 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...