Как поместить процентную ширину в html-холст (без css)

У меня есть изображение и наложил холст поверх него, чтобы я мог рисовать 'on' изображение без изменения самого изображения.

<div class="needPic" id="container">
    <img id="image" src=""/>
    <!-- Must specify canvas size in html -->
    <canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas>
</div>

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

По какой-то причине я не могу размер холста в CSS, поэтому выглядит так, как будто я должен сделать это в html. Чтобы уточнить, когда я пытаюсь указать размеры холста в CSS, они фактически не изменяют размер холста. Кажется, что изображение каким-то образом вмешивается.

Любая помощь будет оценена.

Обновление: Если я делаю <canvas id="sketchpad" style="width:70%;height:60%;"></canvas>, то по умолчанию он имеет высоту 150 пикселей и ширину 300 пикселей (независимо от устройства), а затем растягивает холст, чтобы он соответствовал div. Я установил div в 60% ширины и 60% высоты в css, поэтому холст растягивается, чтобы заполнить это. Я подтвердил это, зарегистрировав canvas.width vs canvas.style.width - canvas.width было 300px, а canvas.sytle.width было '60% '(из родительского div). Это вызывает некоторые действительно странные эффекты пикселизации и рисования...

Ответы

Ответ 1

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

Я бы порекомендовал вам отрегулировать изображение, а затем убрать холст на любой размер изображения. Вы можете сделать это, используя getComputedStyle(element), который дает вам любой размер, для которого элемент установлен в пикселях.

После изображения onload (так как вам нужно убедиться, что изображение загружено, чтобы получить его размер) или позже, если вы измените размер изображения (CSS) на ходу, вы можете сделать это:

/// get computed style for image
var img = document.getElementById('myImageId');
var cs = getComputedStyle(img);

/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);

/// now use this as width and height for your canvas element:
var canvas = document.getElementById('myCanvasId');

canvas.width = width;
canvas.height = height;

Теперь холст будет соответствовать изображению, но с соотношением пикселей холста 1:1, чтобы помочь вам избежать проблем, когда вы собираетесь рисовать на холсте. В противном случае вам также нужно будет преобразовать/масштабировать координаты мыши/касания.

Ответ 2

Измените размер вашего холста, чтобы он соответствовал размеру окна/браузера:

<script>
function resizeCanvas() {
    var canvs = document.getElementById("snow");
    canvs.width = window.innerWidth;
    canvs.height = window.innerHeight;
}
</script>

<body onload="resizeCanvas();">
    <canvas id="snow" ></canvas>
</body>

Ответ 3

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

См. Изменить размер холста HTML5, чтобы он соответствовал окну, хотя и не идентичен, аналогичное решение должно работать.

Ответ 4

Задайте высоту холста для окна innerHeight и ширину для окна innerWidth:

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

Если вам нужен определенный процент, умножьте их на процент. Пример:

//25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages

Ответ 5

Вместо использования width = "используйте стиль =" " как таковой

<canvas id="sketchpad" style="width:70%; height:60%" >Sorry, your browser is not supported.</canvas>

EDIT:

<div class="needPic" id="container" style="width:70%; height:60%; min-width:__px; min-height:__px">
    <img id="image" src="" style="width:70%; height:60%; min-width:__px; min-height:__px"/>
    <!-- Must specify canvas size in html -->
    <canvas id="sketchpad" style="width:70%; height:60%; min-width:__px; min-height:__px>Sorry, your browser is not supported.</canvas>
</div>