Хотя все называет Canvas новой тег для HTML5/"> html5, кажется, что холст принадлежит к новому знанию языка HTML, но на самом деле, рисунок Canvas выполняется с помощью JavaScript. Поэтому, если вы хотите изучить рисунок Canvas, у вас должен быть основа Javascript.
Кроме того, при рисовании картинок всегда есть некоторые термины и знания в изображениях, поэтому, если у вас есть опыт создания снимков или искусства, будет легче выучить холст.
Холст означает холст. Холст в HTML5 действительно очень похож на холст в реальной жизни. Таким образом, видение его как осязаемого холста может ускорить понимание.
холстЧтобы нарисовать с холстом, прежде всего, вам нужно иметь холст. Если у вас нет холста на вашей книжной полке, вы можете купить бросок и вставить его. Конечно, нам не нужно тратить деньги на веб -странице, просто напишите холст, аналогично:
<canvas id = "cvs"> ваш браузер не поддерживает Canvas </canvas>
Текст в теге предназначен для браузеров, которые не поддерживают холст, и эти поддерживаемые никогда не будут видны.
Необходимо упомянуть характеристики этого холста. Он имеет два нативных атрибута, а именно ширина и высота. В то же время, поскольку это также элемент 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. Но что настолько раздражает, что происхождение в математике - это левый нижний угол. Этот...
Некоторые базовые знания о рисованииПрежде всего, вам нужно знать, какие изменения координат будут рисовать какие линии? Например, если координата X становится больше, а координата Y остается неизменной, можно провести горизонтальную линию; Если координата Y изменяется, но координата x остается неизменной, можно нарисовать вертикальную линию.
Конечно, есть также диагональные линии, левые диагональные линии и правые диагональные линии. Если вы можете сравнить картинки, большинство людей могут понять их одновременно; Более удручающе рисовать с кодом, и вы можете думать об этом только с помощью логического мышления.
Если вы сейчас смущены строками, не волнуйтесь, вы, естественно, поймете их во время учебного процесса.
другойCanvas имеет отличную функцию от настоящего холста, который является то, что он прозрачен по умолчанию и не имеет цвета фона. Это очень важно большую часть времени.