Размер холста, отбрасывающий слушателей x y

Question

В моем html у меня есть следующее, чтобы изменить размер холста на ширину и высоту.

#canvas, 
#canvasCursor { 
    cursor: none; 
    background: #fff; 
    position: absolute; 
    left: 50px; 
    top: 30px; 
    width: 62%; 
    height: 80%; 
    z-index: 1; 
} 

Однако это, как представляется, увеличивает размер рисунка и слушателей x y.
click here и вы будете знать, что я имею в виду.

Answer 1

Две проблемы:

1) вы устанавливаете ширину холста с помощью правила CSS. Это не сработает. Если вы не задаете размер для холста, он будет по умолчанию 300 x 150 пикселей независимо от того, что вы задали с помощью CSS. Это означает, что все в нем масштабируется (как если бы это был образ фиксированного размера, который является в основном холстом). Если вы do установите размер, но по-прежнему используете CSS, , размер будет масштабироваться.

Вы теряете производительность и качество, и вам также нужно будет пересчитать позиции мыши.

Необходимо обновить размер от Javascript.

#canvas, #canvasCursor { 
    cursor: none; 
    background: #fff; 
    position: absolute; 
    left: 50px; 
    top: 30px; 
    width: 62%; /* REMOVE */ 
    height: 80%; /* REMOVE */ 
    z-index: 1; 
} 

2) Вы не обновляете размер холста из любого места. Вы можете обновить холст, установив его ширину и высоту свойства - установить его размер окна можно использовать:

window.onresize = function() { 
     canvas.width = window.innerWidth; 
     canvas.height = window.innerHeight; 

     //call redraw 
    } 

или если вы хотите установить его в проценты вам нужно рассчитать, так как холст не принимает значение%.

window.onresize = function() { 
     canvas.width = window.innerWidth * 0.62; //ie. 62% of width 
     canvas.height = window.innerHeight * 0.8; //ie. 80% of height 

     //call redraw 
    } 

Холст использует ТОЛЬКО пиксельные размеры, поскольку этот элемент является особым случаем.

Почему innerWidth/Height? Это представляет собой фактическое окно просмотра для окна, которое вы видите (вы увидите это более четко с помощью мобильного устройства).

Если вы просто хотите, фиксированный размер можно установить, что непосредственно:

canvas.width = 800; 
canvas.height = 600; 

Зачем вам нужно обновить (перерисовать все)? Холст имеет только снимок того, что на него нарисовано, - он не хранит его копию. Что на экране.

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

Answer 2

Проблема в вашем javascript. Я проверил ваш Paint.js на представленном вами веб-сайте. Вы использовали

var canvas = document.getElementById('canvas'), 
ctx = canvas.getContext('2d'), 
canvasWidth = canvas.width, 
canvasHeight = canvas.height; 

Между тем, вы имеете ширину холста и высоту в вашем HTML наборе будет 800 * 600.

<canvas id="canvas" width="800" height="500"></canvas> 

Следовательно, canvas.width (height) вернет все, что содержится в html. Затем вы используете 800 и 600 для выполнения ваших вычислений вместо реального размера холста. Вот почему это выглядит так, что холст был изменен странным образом.

Чтобы получить фактическую информацию о ширине и высоте, вы должны использовать canvas.scrollWidth и canvas.scrollHeight. Удачи!

Answer 3

При изменении размера холста необходимо соответствующим образом изменить его ширину и высоту. Вы можете сделать это в onresize событии:

window.onresize = function() { 
    canvas.width = canvas.offsetWidth; 
    canvas.height = canvas.offsetHeight; 

    // repaint everything 
} 

Вы должны будете сделать это и для рисования холста и курсоры холста. Имейте в виду, что все будет очищено при изменении размера холста и you will need to repaint.

Answer 4

Обратите внимание, что при изменении размера холста он автоматически очищается, что означает, что все нарисованное на нем полностью исчезло. Поэтому я советую вам либо не выбирать процент, либо прикрепить функцию перекраски при изменении размера!