Question

我目前正在建立我的网站。我希望它具有交互性并且设计美观。我目前正在做的只是将图像绘制到画布上，并带有一些JavaScript，可以在调整窗口大小时按比例调整图像大小。但是，当我将其调整为最小的浏览器尺寸或最大的浏览器尺寸时，由于它是成比例的，因此在侧面留有白色边框。

我已经尝试使用CSS通过'width: 100%'和'height: 100%'或'width / height: auto'来填充网页，但这似乎并没有改变。我还尝试了其他调整大小功能（到下面）。但它们都非常相似，甚至不一样。

img.onload = function () {
    ctx.canvas.width = img.width;
    ctx.canvas.height = img.height;

    ctx.drawImage(img, 0, 0);

  resize();
};

function resize() 
{
    var ratio = canvas.width / canvas.height;
    var canvas_height = window.innerHeight;
    var canvas_width = canvas_height * ratio;
    if(canvas_width>window.innerWidth)
    {
        canvas_width=window.innerWidth;
        canvas_height=canvas_width/ratio;
    }

    canvas.style.width = canvas_width + 'px';
    canvas.style.height = canvas_height + 'px';
}

来自：https://codepen.io/anon/pen/VNjwYE

应该发生的是，图像占据了整个画布，侧面没有边框。但是，正如我所说，图像的侧面有白色边框。这张imgur专辑有两个问题的屏幕截图。 https://imgur.com/a/CDbKGjL

其余代码（即CSS和HTML）可以在我的Codepen上找到：https://codepen.io/DreamingInsanity/pen/aPoJEK

谢谢，梦想。

Answer 1

只需在您的CSS中添加body{ margin:0px; }，

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();

img.src = "https://source.unsplash.com/2000x1000/?trees,nature,forest";

img.onload = function () {
    ctx.canvas.width = img.width;
    ctx.canvas.height = img.height;

    ctx.drawImage(img, 0, 0);
  
  resize();
};

function resize() {
    var ratio = canvas.width / canvas.height;
    var canvas_height = window.innerHeight;
    var canvas_width = canvas_height * ratio;

    if(canvas_width>window.innerWidth)
    {
        canvas_width=window.innerWidth;
        canvas_height=canvas_width/ratio;
    }

    canvas.style.width = canvas_width + 'px';
    canvas.style.height = canvas_height + 'px';
}

window.onresize = resize;

html, body {
    background-color: #1A1919;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0px;// do it 
}

#canvas {
    width: auto;
    height: auto;
    filter: grayscale(0%);
}


#top_bar {
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 80px;
    top: 0px;
}

<html>
<head runat="server">
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="Home/Stylesheet.css">
         <link rel="stylesheet" type="text/css" href="Home/Buttons.css" />
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="Scripts/Canvas.js"></script>
    <div id="top_bar"></div>
    </body>
</html>

Answer 2

哇，我好蠢。我更改了我使用的代码编辑器，同时调整了文件结构。正如您在HTNL中看到的那样，我正在/Home/下寻找CSS，而现在，我正在/CSS/下寻找CSS。

我觉得自己是个白痴！

很抱歉浪费您的时间，梦想

如何在画布上按比例绘制我的图像，但在调整窗口大小时不留下任何边框

2 个答案: