HTML5 Canvas Rhailly Analysis Analysis

Комментарий: холст означает холст. Хотя все называет Canvas новой тегом для HTML5, кажется, что Canvas принадлежит к новому знанию языка HTML, на самом деле, рисунок Canvas производится через JavaScript. Итак, если вы хотите изучить холст, у вас должен быть фонд JavaScript

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

Холст означает холст. Холст в HTML5 действительно очень похож на холст в реальной жизни. Таким образом, видение его как осязаемого холста может ускорить понимание.

холст

Чтобы нарисовать с холстом, прежде всего, вам нужно иметь холст. Если у вас нет холста на вашей книжной полке, вы можете купить бросок и вставить его. Конечно, нам не нужно тратить деньги на веб -странице, просто напишите холст, аналогично:

<canvas> Ваш браузер не поддерживает Canvas </canvas>

Текст в теге предназначен для браузеров, которые не поддерживают холст, и эти поддерживаемые никогда не будут видны.

Примечание: необходимо упомянуть характеристики этого холста. Как и IMG, у него есть два нативных атрибута, а именно ширина и высота. В то же время, поскольку это также элемент HTML, он также может использовать CSS для определения ширины и высоты. Однако обязательно отметьте, что его собственная ширина и высота отличаются от ширины и высоты, определенной через CSS!

Мы используем JS, чтобы изменить нативную ширину и высоту холста, например:

Canvas.width = 400

Canvas.height = 300

Но использование JS для изменения ширины и высоты холста путем работы CSS, это так:

canvas.style.width = '400px'

canvas.style.height = '300px'

Видно, что грамматическая разница очень очевидна. На самом деле, разница более очевидна.

В чем разница между ними?

Например, для ширины Canvas 1000 вы рисуете вертикальную линию на левой стороне холста, шириной 100 пикселей. В настоящее время вы устанавливаете ширину самого холста на 500, что эквивалентно щелчке с правой половины холста, но в настоящее время ширина вертикальной линии все еще 100.

Но если вы используете CSS для изменения ширины холста на 500, он эквивалентен экструдированию холста с 1000 до 500, поэтому ширина вертикальной линии становится 50.

(Это всего лишь теоретическая ситуация. Когда фактически устанавливает нативную ширину холста, она очистит нарисованное содержание.)

Собственная ширина и высота Canvas являются атрибутами самого холста, а ширина и высота, заданная CSS, можно рассматривать как масштабирование. Если вы масштабируете слишком случайно, то графика на холсте может стать неузнаваемой для вас.

Таким образом, есть предложение: если в особых обстоятельствах не используйте CSS для определения ширины и высоты холста.

В холсте есть, и теперь мы вынимаем:

var cvs = document.getElementbyId ('cvs');

Слушай, это точно так же, как получить другие элементы.

щетка

Теперь, когда холст уже доступен, я хочу рисовать его на нем, конечно, мне также нужна ручка. Метод получения ручки заключается в следующем:

var ctx = cvs.getContext ('2d');

Метод GetContext используется для удержания ручки, но здесь есть еще один параметр: 2d. Что это значит? Это можно рассматривать как тип кисти.

Так как есть 2D, тогда будет 3D? Вероятно, в будущем будут некоторые, но не сейчас. Итак, давайте сначала используем эту 2D -ручку.

! Так можем ли мы поставить еще несколько ручек? Ответ нет.

Я хочу задать вопрос: сколько ручек вы используете одновременно при рисовании изображений? Я считаю, что 99,9% людей могут использовать только один. Хотя некоторые мастера боевых искусств, такие как Сяолонгну, могут одновременно рисовать обеими руками, это очень нереально для простых людей, верно?

Так что теперь вы можете чувствовать себя облегченным, потому что тег холста HTML5 также поддерживает только одну ручку одновременно!

Некоторые студенты, которые знакомы с JS, могут захотеть быть умными: я использую метод получения кисти в предыдущем способе получить еще несколько ручек, разве этого не будет достаточно? !

например:

var con = cvs.getContext ('2d');

var ctx = cvs.getContext ('2d');

Хахахаха, это кажется успешным. Я так думал до теста, но на самом деле это просто иллюзия!

Потому что я обнаружил, что погрузил одну из ручек красными чернилами, а другая ручка также была автоматически окунается красными чернилами! Потому что две ручки одна! ебать.

Если вам нужно нарисовать разные цвета, то способ продолжать окунуть эту уникальную ручку в новом цвете.

Это на самом деле не преимущество, это дефект, вы испытаете его в будущем.

координировать

2 -й мир - это самолет. Чтобы определить точку на плоскости, требуются два значения, X-координаты и Y-координаты. Это очень важная базовая концепция, но, поскольку все изучали математику, я не буду много говорить об этом.

Происхождение холста - верхний левый угол, такой же, как Flash. Но что настолько раздражает, что происхождение в математике - это левый нижний угол. Этот...

другой

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