Блог

Главная - Вопросы по программированию - Холст: Удалить функциональность полосы прокрутки и серое поле/контур границы?

Холст: Удалить функциональность полосы прокрутки и серое поле/контур границы?

#html #css #django #canvas

Вопрос:

Я работаю над проектом в Django, в котором один элемент холста накладывается на другой с функциональностью, позволяющей мне наводить курсор мыши на верхний холст, чтобы отобразить изображение, загруженное на холст под ним. Функциональность отлично работает, однако, похоже, она наносит ущерб другими способами, а именно:

  1. Ширина и высота окна больше, чем полотна, что приводит к ненужной прокрутке. Я хочу избавиться от этого.
  2. Вокруг моих элементов холста есть светло-серая граница, и я не могу от нее избавиться. Попробовал установить контур и границу на нет, но без костей.
  3. У меня также возникли проблемы с центровкой полотен в окне.

Моя интуиция подсказывает мне, что эти проблемы связаны с тем фактом, что моя стопка холстов установлена в абсолютное положение, в то время как ее родительский div установлен в относительное (это функциональность, которая позволяет мне складывать холсты), но это всего лишь догадка.

Я рассмотрел множество других подобных вопросов SO, но ни одно из их решений не работало для моего кода. Любая помощь будет очень признательна. Спасибо.

 window.onload = function() {
    //Create Bottom canvas amp; context
    var canvas = document.getElementById('canvas');
    var ctxB = canvas.getContext('2d');

    //Create Top canvas amp; context
    var canvas2 = document.getElementById('canvas2');
    var ctxT = canvas2.getContext('2d');

    //Set waterfall image variable
    var waterfall = document.getElementById('waterfall');

    //Set canvas wamp;h properties
    canvas.width = canvas2.width = .25*waterfall.width;
    canvas.height = canvas2.height = .25*waterfall.height;

    //Populate Bottom canvas with image
    ctxB.drawImage(waterfall, 0, 0, canvas.width, canvas.height);

    //Populate Top canvas with white rectangle
    ctxT.fillStyle = "white";
    ctxT.fillRect(0, 0, canvas2.width, canvas2.height);

    //Erase Top canvas to reveal waterfall
    canvas2.addEventListener('mousemove', event => {
        var x = event.offsetX;
        var y = event.offsetY;  
        const eraseSize = 100;
        ctxT.clearRect(x-eraseSize/2, y-eraseSize/2, eraseSize, eraseSize);
    })
} 
 #stack {
    position: relative;
}
#stack canvas {
    position: absolute;
    display: block;
} 
 <!DOCTYPE html>
{% load static %}
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="{% static 'entrance/entrance.css' %}">
        <script src="{% static 'entrance/entrance.js' %}"></script>
    </head>

    <body>
        <p hidden>
            <img src="{% static 'entrance/Waterfall.jpg' %}" alt="issue here" id="waterfall" />
        </p>
        <div id="stack">
            <canvas id="canvas"></canvas>
            <canvas id="canvas2"></canvas>
        </div>
    </body>
</html>

Комментарии:

1. пожалуйста, предоставьте таблицу стилей «<ссылка rel=»таблица стилей» href=»{% статический вход/вход.css»%} » > » — чтобы удалить серую рамку. Поместите холст в контейнер для хранения и укажите css контейнера для высоты:авто и ширины: 100%; также добавьте поле слева: авто; поле справа: авто; для центрирования всего

Ответ №1:

Оказывается, мне нужно было закрыть и перезапустить свой локальный сервер в Django, чтобы увидеть, как вносятся некоторые изменения в CSS. Я не уверен, почему это так, так как я всегда обновляю кэш браузера, когда сохраняю изменения в своем коде. Если у кого-нибудь есть информация об этом, я хотел бы получить некоторое представление.

Метки: