HTML5: холст ширина и высота

Question

Рассмотрим:

<canvas id="myCanvas" width="200" height="300" /> 

ли эти единицы в пикселях? Если нет, есть ли способ обхода?

Answer 1

Да, эти единицы всегда в пикселях и относится к растрового холста элемент использует. Однако, если размер не определен для элемента с использованием CSS (например, атрибута style или с использованием таблицы стилей), элемент автоматически примет размер его растрового изображения.

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

Чтобы использовать другие единицы вы должны вручную рассчитать их с помощью JavaScript, например:

// using % of viewport for canvas bitmap (pixel ratio not considered) 
var canvas = document.getElementById("myCanvas"), 
    vwWidth = window.innerWidth, 
    vwHeight = window.innerHeight, 
    percent = 60; 

canvas.width = Math.round(vwWidth * percent/100); // integer pixels 
canvas.height = Math.round(vwHeight * percent/100); 

// not to be confused with the style property which affects CSS, ie: 
// canvas.style.width = "60%"; // CSS only, does not affect bitmap 

Если вы хотите поддержать сетчатку, то вам необходимо использовать window.devicePixelRatio и умножить его размеров. В этом случае потребуется также CSS (в сочетании с кодом выше):

var pxRatio = window.devicePixelRatio || 1, 
    width = Math.round(vwWidth * percent/100), 
    height = Math.round(vwHeight * percent/100); 

canvas.width = width * pxRatio; 
canvas.height = height * pxRatio; 

canvas.style.width = width + "px"; 
canvas.style.height = height + "px"; 

Answer 2

Почти все параметры размера в HTML5 будут находиться в пикселях. Если у вас возникли проблемы рисования холст с текущим кодом, попробуйте вынимая блок автоматического закрывания в конце:

<canvas id="myCanvas" width="200" height="300"></canvas> 

Вы можете также рассмотреть просмотр свойств элемента холста, как это определено W3 Schools: http://www.w3schools.com/html/html5_canvas.asp

Answer 3

использовать CSS, чтобы настроить ваши стили холст

<canvas id="el"></canvas> 

<style> 

    #el{ 
     display: block; 
     width:100%; 
     height: 100%; 
    }  

</style>