HTML5 масштабируются размер холста

Question

Мой CSS выглядит следующим образом:

#Canvas { 
width: 100%; 
max-width: 548px; 
height: auto; 
} 

И весы мой образ, как я хочу.

Однако, когда я звоню canvas.width, он всегда будет возвращать ту же ширину, даже если мое окно браузера действительно мало. Почему я не могу получить размер от canvas?

мне нужен размер, потому что я проверить mouse hover на startX = percentX * canvas.width И это не правильно, потому что canvas.width является статическим.

Cheers!

Answer 1

canvas элемент имеет свой собственный width и height атрибутов, поэтому редактирование width и height в css только масштабировать его, но canvas "атрибуты останутся прежними. Поэтому, чтобы изменить размер canvas, вам необходимо будет изменить его размер на JavaScript с помощью функции onresize.

Answer 2

Вы можете использовать canvas.scrollWidth, чтобы получить width. Запуск code snippet в Full Page

function getWidth() 
 
{ 
 
    var can = document.getElementById("myCanvas"); 
 
    var wid = can.scrollWidth; 
 
    alert(wid); 
 
}

#myCanvas { 
 
width: 100%; 
 
max-width: 548px; 
 
height: auto; 
 
border: 1px solid red; 
 
}

<canvas id="myCanvas"></canvas> 
 

 
<input type="button" value="Get Width" onclick="getWidth()"/>