在HTML5 Canvas中调整图像大小以适合JS中的任何监视器

Question

I have an image that covers the entire width and height of a canvas that covers the entire screen. 我的图像可以覆盖整个屏幕的画布的整个宽度和高度。 The problem is, when the code is run on a computer with a different resolution (width and height), the image does not adjust to the proper height and width of that screen. 问题是，当代码在具有不同分辨率（宽度和高度）的计算机上运行时，图像无法适应该屏幕的适当高度和宽度。 It stays the original size that I set it in JS. 它保持了我在JS中设置的原始大小。 I'm very new to JavaScript, so any help I could get to this image to resize on different resolutions would be amazing. 我是JavaScript的新手，所以我能获得这张图像以在不同分辨率下调整大小的任何帮助都将是惊人的。 Thanks! 谢谢！

 //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>

Answer 1

You can adjust some c.drawImage() params to get what you're after using some window properties. 您可以调整一些c.drawImage()参数来获得使用某些window属性后的效果。

Edit: As pointed out in a comment below I added some additional code to listen for a window resize which will adjust the dimensions of the canvas image as needed. 编辑：正如下面的评论中指出的那样，我添加了一些其他代码来侦听窗口调整大小，这将根据需要调整画布图像的尺寸。 This solution does flash a bit on my screen when resizing so there is a potential drawback. 调整大小时，此解决方案确实会在屏幕上闪烁一点，因此存在潜在的缺陷。

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

JSFiddle: http://jsfiddle.net/gucr5m1b/4/ 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>

在HTML5 Canvas中调整图像大小以适合JS中的任何监视器

问题描述

1 个解决方案

解决方案1
1 2018-11-07 14:58:35

在HTML5 Canvas中调整图像大小以适合JS中的任何监视器

问题描述

1 个解决方案

解决方案1 1 2018-11-07 14:58:35

解决方案1
1 2018-11-07 14:58:35