Как пропорционально нарисовать мое изображение на холсте, но не оставить никаких границ при изменении размера окна - PullRequest
Новая
       17

Как пропорционально нарисовать мое изображение на холсте, но не оставить никаких границ при изменении размера окна

0 голосов
/ 05 апреля 2019

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

Спасибо, Dream.

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

просто добавьте body{ margin:0px; } в ваш css, 

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>
0 голосов
/ 05 апреля 2019

Ух ты, я чувствую себя так глупо.Я изменил, какой редактор кода я использовал, и в то же время улучшил структуру моего файла.Как вы можете видеть в HTNL, я ищу CSS под /Home/, тогда как сейчас я ищу его под /CSS/.

Я чувствую себя таким идиотом!

Извинитедля тратить время, Dream

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...