Недавно по работе я узнал о теге Canvas в Html.
Canvas — это новый компонент HTML5. Он похож на занавес, на котором с помощью JavaScript можно рисовать различные диаграммы, анимацию и т. д.
В эпоху, предшествовавшую Canvas, рисование можно было осуществить только с помощью плагинов Flash, а для взаимодействия страниц приходилось использовать JavaScript и Flash. С Canvas нам больше не нужен Flash, и мы можем напрямую использовать JavaScript для завершения рисования.
Проблемы начались, когда я сам написал «Привет, мир» после просмотра урока. Посмотрите на код ниже:
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=width: 200px;height: 200px; border:1px сплошной черный;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); ctx.moveTo(0, 0); ctx.lineTo(200, 200); ctx.stroke();</script></body></html>
Смысл приведенного выше кода состоит в том, чтобы нарисовать прямую линию на холсте шириной и высотой 200 пикселей каждая. Начальная точка прямой — (0,0), а конечная точка — (200,200);
Однако изображение, нарисованное браузером:
Взгляните на эту картинку~ Почему такой наклон? Так не должно быть~ Это должна быть диагональная линия~~
Позже, после поиска информации, я узнал, что при установке ширины и высоты тега холста возникают следующие методы и последствия:
Ширина элемента Canvas по умолчанию составляет 300 пикселей, а высота — 150 пикселей. Чтобы установить его ширину и высоту, вы можете использовать следующий метод:
Способ первый:
1 <ширина холста=500 высота=500$amp;>amp;$lt;/canvas>
Способ 2. Используйте операцию HTML5 Canvas API.
1 var Canvas = document.getElementById('идентификатор холста, с которым нужно работать');
2 холст.ширина = 500;
3 холст.ширина = 500;
Если ширина и высота заданы следующим методом, элемент Canvas будет растянут от исходного размера до заданной ширины и высоты:
Способ 1. Использование CSS растянет
1 #Для работы с идентификатором холста{
2 ширина: 1000 пикселей;
3 высота: 1000 пикселей;
4 ｝
Также включает style= во встроенных стилях. То есть в приведенном примере тоже произойдет растяжение.
Способ 2. Операции с использованием HTML5 Canvas API будут растянуты.
1 var Canvas = document.getElementById('идентификатор холста, с которым нужно работать');
2 холст.стиль.ширина = 1000 пикселей;
3 холст.стиль.высота = 1000 пикселей;
Способ 3: использование $(#id).width(500) jquery;
Другое: ширина и высота холста не могут быть выражены в процентах. холст отобразит процент в виде числового значения
Таким образом, из приведенной выше информации мы можем узнать, что причина в том, что код в моем примере выше растягивает ширину и высоту холста, делая изображение не соответствующим ожиданиям.
Теперь я переписал пример кода, чтобы правильно установить ширину и высоту холста:
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px сплошной черный;> Ваш браузер не поддерживает элемент холста.</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.moveTo(0, 0); cxt.lineTo(200, 200); cxt.stroke();</script></body></html>
результат:
Заканчивать.
Подвести итогВыше приведено все содержание этой статьи. Я надеюсь, что содержание этой статьи имеет определенную справочную ценность для каждого человека в учебе или работе. Если у вас есть какие-либо вопросы, вы можете оставить сообщение для связи. Спасибо за вашу поддержку VeVb Wulin. Сеть.