Почему у меня canvas становится сплющенным при открытии файла html?
Вот код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body>
<canvas style="width: 100px; height: 100px;"></canvas>
</body>
<script>
function draw() {
var canvas = document.querySelector('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
</script>
</body>
</html>
Прямоугольник должен получиться с одинаковыми сторонами, но почему-то плющится.
ПрограммированиеВеб-дизайн+3
Происходит примерно то же самое, что и при непропорциональном изменении размеров картинки.
CANVAS по умолчанию имеет размеры 300 на 150. Присваивая ему стиль "width: 100px; height: 100px", вы неравномерно сплющиваете картинку 2:1 до соотношения 1:1. Отсюда получается искажение.
Чтобы решить проблему, элементу CANVAS нужно задать его исходные размеры через атрибуты, например:
<canvas width="200" height="200"></canvas>2 эксперта согласны
Марк Сафронов
29 мар 2022подтверждает
Хмм, а это интересный трюк: на канве чертить в одних пропорциях, а в CSS выставить другие... 🤔
А, да, ответ 100%... Читать дальше