Выходит ли когда-нибудь рисунок холста за фиксированные пределы элемента HTML? - PullRequest
Новая
       27

Выходит ли когда-нибудь рисунок холста за фиксированные пределы элемента HTML?

0 голосов
/ 23 марта 2019

Я сталкиваюсь с ситуацией, когда мой рисунок на холсте меньше или выходит за пределы элемента canvas, несмотря на все мои усилия по связыванию этих двух элементов.

Я использовал загрузчик и отключил егочтобы убедиться, что это была проблема Javascript или логики.

index.html - 

<canvas id="canvas" class="w-100 test"></canvas>

style.css - 

.w-100 {
    width: 100%;
}

ui.js - 


function resizeCanvas() {

    const $canvas = $('canvas')
        $canvas.clearCanvas()
    $canvas.width($canvas.parent().width)
    $canvas.height($canvas.width() / 2)

    $('canvas').drawRect({
      fillStyle: '#FAE3BF',
      x: 0, y: 0,
      width: $canvas.width(),
      height: $canvas.height(),
      fromCenter: false
    })

    $('canvas').drawRect({
      fillStyle: '#d2bb9b',
      x: 0.1625 * $canvas.width(), y: 0,
      width: 0.15 * $canvas.width(),
      height: $canvas.height(),
      fromCenter: false
    })

}

$(window).resize(resizeCanvas)

$(document).ready(() => {
    resizeCanvas()
})

При масштабировании до действительно больших или малых размеров создается впечатление, что, несмотря на то, что элемент canvas имеет определенный видимый размер, рисунок выходит за пределы или внутри него.

Я не могувполне объясните проблему - я могу только представить, что я дважды изменяю размеры с помощью CSS или чего-то в этом духе.

Вот как это выглядит при разных масштабах - Small scale

Medium scale

Large scale

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

...