Подробное объяснение разницы между шириной, высотой и стилем в холсте H5.

Недавно я столкнулся с небольшой проблемой при изучении свойств холста, а именно ширины и высоты холста. Я, наконец, решил ее путем поиска соответствующей информации, поэтому поделюсь процессом решения со всеми, но ниже не буду много говорить. Давайте посмотрим на детали.

1. При использовании атрибута ширины и высоты дисплей не будет растягиваться обычным образом следующим образом:

 <canvas id=mycanvas width=300 height=300>Браузер не поддерживает Canvas, обновите или используйте другой браузер! </canvas><script type=text/javascript> var Canvas = document.getElementById(mycanvas), ctx = Canvas.getContext('2d'); ctx.moveTo(0,0); ctx.lineTo(300,150); .stroke();</script>

Эффект бега следующий: диагональная линия

2. При использовании стиля изображение будет растянуто (деформировано).

 <style> #mycanvas { ширина: 150 пикселей; высота: 150 пикселей } </style>

Эффект операции

Холст — это доска для рисования и лист бумаги для рисования. Доска для рисования эквивалентна контейнеру. Рисунок/работа выполняется на бумаге для рисования.

Ширина и высота чертежной доски и чертежной бумаги по умолчанию составляют 300*150. Когда ширина и высота чертежной бумаги и чертежной доски равны, изображение не будет растянуто. Доска для рисования отличается, изображение будет растянуто (деформировано).

1. Атрибуты ширины и высоты предназначены для установки ширины и высоты чертежной доски и чертежной бумаги.

Например: ширина=300 высота=300 означает, что ширина и высота чертежной доски равны 300*300, а ширина и высота чертежной бумаги также равны 300*300. Диагональное изображение задания размером 300*300 не будет. быть растянутым.

2. В стиле задаются только ширина и высота чертежной доски. Ширина и высота чертежной бумаги по-прежнему имеют значение по умолчанию 300*150.

(В качестве примера возьмите изображение выше). Поэтому на бумаге для рисования рисуется только часть диагонального изображения 300*300, над которым вы работаете, а именно:

Кстати, бумага для рисования не оставит доску для рисования пустой, поэтому бумага для рисования и изображение должны быть растянуты до того же размера, что и доска для рисования. В этом примере ширина чертежной бумаги и ширина монтажной области равны 30, а высота равна половине монтажной области, поэтому вам нужно растянуть высоту только в два раза, чтобы изображение также растянулось и утончилось. Направление X остается неизменным, а направление Y увеличивается вдвое, поэтому мы получаем деформированную картинку.

Что касается настроек ширины и высоты Canvas в HTML5.

По умолчанию элемент Canvas имеет ширину 300 пикселей и высоту 150 пикселей. Чтобы установить его ширину и высоту, вы можете использовать следующий метод (он не будет растянут):

Способ первый:

<ширина холста=500 высота=500></canvas>

Способ 2. Используйте HTML5 Canvas API для нормальной работы.

var Canvas = document.getElementById('идентификатор холста, с которым вы хотите работать');

холст.ширина = 500;

холст.ширина = 500;

Если ширина и высота заданы следующим методом, элемент Canvas будет растянут от исходного размера до заданной ширины и высоты:

Способ 1. Использование CSS растянет

#Для работы с идентификатором холста{

ширина: 1000 пикселей;

высота: 1000 пикселей;

｝

Способ 2. Операции с использованием HTML5 Canvas API будут растянуты.

var Canvas = document.getElementById('идентификатор холста, с которым вы хотите работать');

холст.стиль.ширина = 1000 пикселей;

холст.стиль.высота = 1000 пикселей;

Способ 3: использование $(#id).width(500) jquery;

Другое: ширина и высота холста не могут быть выражены в процентах. холст отобразит процент в виде числового значения

Выше приведено все содержание этой статьи. Я надеюсь, что содержание этой статьи имеет определенную справочную ценность для каждого человека в учебе или работе. Если у вас есть какие-либо вопросы, вы можете оставить сообщение для связи. Спасибо за вашу поддержку VeVb Wulin. Сеть.