Содержание

Базовое использование Canvas — Интерфейсы веб API

Он выглядит как элемент <img>, но его отличие в том, что он не имеет атрибутов src и alt. Элемент <canvas> имеет только два атрибута — ширину и высоту. Оба они не обязательны и могут быть выставлены с использованием свойств DOM. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной 300 пикселей и в высоту 150 пикселей. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.

Атрибут id не специфичен для элемента <canvas>, но он может быть применен по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать id, так как это позволяет намного проще идентифицировать наш элемент в сценарии.

Элемент <canvas> может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.

Запасное содержимое

Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент <canvas>, Вам следует предоставить запасное содержимое для отображения этими браузерами.

Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента

<canvas>. Браузеры, которые не поддерживают <canvas> проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают <canvas> проигнорируют запасное содержимое, и просто нормально отобразят canvas.

Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:

<canvas>
  current stock price: $3.15 +0.15
</canvas>

<canvas>
  <img src="images/clock.png" alt=""/>
</canvas>

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

Требуется тег 

</canvas>

В отличии от элемента <img>, элемент <canvas>  требует закрывающийся тег (</canvas>). Если этот тег не предоставлен, остаток документа будет считаться запасным контентом и не будет отображен.

Если запасной контент не нужен, простой  <canvas ...></canvas>

полностью совместим со всеми браузерами, что поддерживают canvas.

Рендеринг содержимого (контекста)

Элемент <canvas> в документе создается с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на OpenGL ES.

Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент

<canvas> имеет метод getContext(), используется для получения контекста визуализации и ее функции рисования. getContext() принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использвать метку «2d».

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

В первой строке скрипта мы получаем узел нашего холста <canvas>, далее с помощью  document.getContext() метода мы присваиваем ему контекст. Имея узел элемента , вы всегда можете получить для рисования контекст при помощи метода getContext()

.

Проверка поддержки

Ранее уже упоминалось, что в браузерах, которые не поддерживают <canvas> отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер canvas, можно прямо из кода, проверив наличие метода getContext(). Код с запасным содержимым, который мы приводили Выше, становится следующим:

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  
} else {
  
}

Зачем использовать тег HTML 5 Canvas?



Простите мне мое невежество, но я очень новичок на арене HTML 5 и никогда не работал с графикой, использующей Javascript.

Я немного читал и наткнулся на тег Canvas, и источник заявил, что тег canvas действует как графический контейнер и используется для визуализации графики на веб-странице с помощью Javascript.

Мои вопросы таковы: почему мне нужно использовать Canvas в качестве заполнителя для рендеринга графики, а не использовать какой-то другой произвольный тег, который можно использовать, например, в качестве графического заполнителя?

javascript html
Поделиться Источник Draco     09 сентября 2011 в 13:23

7 ответов

  • Почему все считают canvas эксклюзивной функцией HTML 5?

    Почему элемент рисования canvas считается эксклюзивной функцией HTML 5 веб-дизайнерами? Черт возьми, я помню, как использовал его для создания виджетов панели мониторинга в OS X еще в 2008 году. Это даже сработало для Safari. И это было в HTML 4. Был ли тогда только Safari, который поддерживал…

  • html 5 canvas ширина линии

    Какие методы линии html canvas позволили бы мне изменить ширину линии, когда я рисую линию? В этом примере используется последняя ширина линии для всех сегментов линии. <!DOCTYPE HTML> <html> <head> </head> <body> <canvas id=myCanvas width=578…


24

Тег <canvas> точно такой же, как тег <img> , с той разницей, что вместо загрузки изображения из сети вы можете нарисовать его самостоятельно с помощью кода javascript. Вы можете рисовать линии, круги, заполненные полигоны, градиенты и матричные изображения. Вы также можете перерисовать содержимое холста в цикле, чтобы сделать анимацию.

Чтобы увидеть, что вы можете сделать с простым canvas 2d (нет webgl, просто стандартный рендеринг 2d), взгляните на эту небольшую демонстрацию или посмотрите это видео , Если ваш браузер слишком стар и не поддерживает canvas.

Это чистый javascript, ничего не загружается из сети, все вычисляется в браузере, включая текстуру и трассированное изображение, используемое для envmapping части. Все в одном файле 4KB html.

Вы действительно думаете, что можете сделать то же самое, используя обычные <div> с ?

EDIT:

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

Поделиться 6502     09 сентября 2011 в 13:30


5

Canvas предназначен для графических манипуляций, а div -нет. С семантической точки зрения, вы должны использовать Canvas .

Поделиться Oded     09 сентября 2011 в 13:24


4

Вы не можете рисовать на произвольных элементах.

Поделиться Dave Newton     09 сентября 2011 в 13:25

  • Зачем использовать мета-тег «Pragma» и «Expires» в головном разделе html

    Зачем использовать мета-тег Pragma и Expires в головном разделе html вот так. Спасибо. <META HTTP-EQUIV=Pragma CONTENT=no-cache> <META HTTP-EQUIV=Expires CONTENT=-1>

  • HTML 5 <Canvas>

    Вот мой код. Нужна помощь в рисовании изображения cloud между горным ландшафтом с использованием элемента html 5 canvas и кода javascript. <!doctype html> <html> <head> <meta charset=utf-8> <title>Untitled Document</title> <canvas id=myCanvas style=border:2px…


3

Canvas позволяет манипулировать пикселями с приемлемой скоростью. Вы можете рисовать различные фигуры,устанавливать цвета для пикселей и т. д. С помощью div вы можете визуализировать только стандартные элементы HTML.

Поделиться bjornd     09 сентября 2011 в 13:27


2

DIV -это контейнер для других тегов. CANVAS -это контейнер для пикселей.

Хотя (вероятно) можно сделать все , что вы хотите сделать с помощью рисования внутри простого DIV, с CANVAS браузер семантически знает, что область будет содержать графику, и может использовать эту информацию соответствующим образом.

Браузеры поддерживают различные процедуры рисования для CANVAS изначально, в то время как вам придется готовить свои собственные полностью в JS для DIV .

Действительно хорошим ресурсом для получения информации о холсте HTML5 является http:/ / diveintohtml5.ep.io/canvas. html

Поделиться jmtd     09 сентября 2011 в 13:24


1

Зачем использовать холст:
1-canvas безопасен в использовании и совместим с несколькими платформами.
2-у него есть много готовых функций для использования в анимации.
3-Вы можете играть со скоростью, пикселями, цветами.
4 — Вы можете сохранить результат холста в виде изображения. 5 — Вы можете профессионально реализовать игры с холстом. регистрация здесь

просто это действует как flash, но без плагинов.

полезные библиотеки для использования:
— мольберт js: flash как библиотека
— обработка js : Открытая библиотека анимации souece


Поделиться Alex     09 сентября 2011 в 18:16


0

Рисование с использованием

<canvas>

Будет загружаться сразу же при входе на веб-страницу с этим в использовании, где

<img>

Это займет гораздо больше времени.

Поделиться user939222     12 сентября 2011 в 12:40

Похожие вопросы:


Нужно ли JavaScript учиться, чтобы использовать все HTML 5 функций?

В эти дни я изучаю новый элемент HTML5 , где я читаю, что тег canvas -это только контейнер для графики, вы должны использовать скрипт, чтобы на самом деле рисовать графику . Итак, я хочу знать, что…


Как позволить Eclipse принять тег canvas?

Я установил плагин Aptana в свой Eclipse и использую тег canvas в своем файле html. Я нахожу, что Eclipse не может распознать тег canvas, он выделяет мои теги canvas и отображает follow msg: <…


Зачем Google использовать тег шрифта?

Итак, я не мог не заметить, демонстрируя брату браузерную штуку Chrome DOM, что Google использует тег <font size=-2> . Я знаю, что это глупый вопрос, но с точки зрения программирования-зачем…


Почему все считают canvas эксклюзивной функцией HTML 5?

Почему элемент рисования canvas считается эксклюзивной функцией HTML 5 веб-дизайнерами? Черт возьми, я помню, как использовал его для создания виджетов панели мониторинга в OS X еще в 2008 году. Это…


html 5 canvas ширина линии

Какие методы линии html canvas позволили бы мне изменить ширину линии, когда я рисую линию? В этом примере используется последняя ширина линии для всех сегментов линии. <!DOCTYPE HTML>…


Зачем использовать мета-тег «Pragma» и «Expires» в головном разделе html

Зачем использовать мета-тег Pragma и Expires в головном разделе html вот так. Спасибо. <META HTTP-EQUIV=Pragma CONTENT=no-cache> <META HTTP-EQUIV=Expires CONTENT=-1>


HTML 5 <Canvas>

Вот мой код. Нужна помощь в рисовании изображения cloud между горным ландшафтом с использованием элемента html 5 canvas и кода javascript. <!doctype html> <html> <head> <meta…


Что такое canvas в HTML 5?

Что такое canvas в HTML 5? Я немного новичок в качестве разработчика. Canvas-это область HTML, на которой можно рисовать графику. 500 id=mycanvas solid= style=border:1px width=600></canvas>…


Canvas тег в Drupal 8

Я хочу спросить, знает ли кто-нибудь, существует ли тег canvas html в Drupal 8? Я пытаюсь сделать поле формы подписи, поэтому мне нужен canvas. Есть ли вообще возможность рендеринга custom HTML в…


Зачем нам нужен тег <html> , если у нас есть <!DOCTYPE html>?

Зачем нам нужно добавлять тег <html> , если мы уже определили, что этот документ является html с помощью тега <!DOCTYPE html> ? Есть ли какой-нибудь другой тег, который можно добавить…

| HTML (Примеры)

Тег <canvas> (от англ. canvas — холст) создаёт область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.

При помощи элемента <canvas> можно создавать рисунки, анимацию, игры и др.

Скрипты

Синтаксис

<canvas></canvas>

Закрывающий тег обязателен.

Атрибуты

height
Задаёт высоту холста. По умолчанию 300 пикселей.
width
Задаёт ширину холста. По умолчанию 150 пикселей.

Также для этого элемента доступны универсальные атрибуты.

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <title>canvas</title>
    <meta charset="utf-8" />
    <script>
      window.onload = function () {
        var drawingCanvas = document.getElementById('smile')
        if (drawingCanvas && drawingCanvas.getContext) {
          var context = drawingCanvas.getContext('2d')
          // Рисуем окружность
          context.strokeStyle = '#000'
          context.fillStyle = '#fc0'
          context.beginPath()
          context.arc(100, 100, 50, 0, Math.PI * 2, true)
          context.closePath()
          context.stroke()
          context.fill()
          // Рисуем левый глаз
          context.fillStyle = '#fff'
          context.beginPath()
          context.arc(84, 90, 8, 0, Math.PI * 2, true)
          context.closePath()
          context. stroke()
          context.fill()
          // Рисуем правый глаз
          context.beginPath()
          context.arc(116, 90, 8, 0, Math.PI * 2, true)
          context.closePath()
          context.stroke()
          context.fill()
          // Рисуем рот
          context.beginPath()
          context.moveTo(70, 115)
          context.quadraticCurveTo(100, 130, 130, 115)
          context.quadraticCurveTo(100, 150, 70, 115)
          context.closePath()
          context.stroke()
          context.fill()
        }
      }
    </script>
  </head>
  <body>
    <canvas>
      <p>Ваш браузер не поддерживает рисование.</p>
    </canvas>
  </body>
</html>

См. также

Ссылки

Нестандартные HTML-теги. Тег canvas

Нестандартные HTML-теги. Тег canvas

CANVAS настолько нестандартный html-тег, что с ним почти никто не работает, да и знают его не многие. А всё из-за специфичности его использования. Он ведь предназначен для создания графики. И не так уж много проектов используют CANVAS в своём интерфейсе.

Сам по себе тег CANVAS устроен таким образом, что внутри него указывается текст, который будет отображаться, если браузер не поддерживает эту технологию. При этом, если браузер поддерживает CANVAS, то вы увидите пустое белое пространство с размерами, указанными в CSS-свойствах. Создают графику на CANVAS с помощью JS.

Изначально CANVAS был создан для возможности создания двумерной графики. На данный момент уже существуют библиотеки, с помощью которых можно создавать трёхмерные изображения. Существует очень много различных JS-библиотек, которые помогают работать с CANVAS. Вот некоторые из них:

  • LibCanvas – библиотека для создания двумерных интерактивных приложений и игр
  • CreaetJS – несколько библиотек, позволяющих работать с двумерной графикой, анимацией, аудио и загрузкой объектов
  • PhiloGL — фреймворк WebGL для визуализации данных, разработки игр и креативного кодирования

Что же с ним делать?

С помощью CANVAS можно делать множество интересных вещей. Например, загляните на Хабрахабр, там полно обзоров на самые разные разработки. Недавно мы разрабатывали конструктор-калькулятор памятников с помощью библиотеки Fabric.js. Оценить его можно, например, по этой ссылке.

CANVAS часто сравнивают с SVG, так как с помощью SVG тоже можно делать различные интерактивные элементы, анимации и т.д. Но CANVAS может манипулировать SVG-элементами, в то время как SVG содержит в себе только отдельные векторные элементы. В CANVAS можно манипулировать любым пикселем, тогда как SVG управляет только path-ами. Также в CANVAS можно задавать для изображений фильтры.

Понравилось? Поделитесь статьей в социальных сетях:

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

Свяжитесь с нами

Оставьте свои контактные данные, и наши менеджеры расскажут и покажут Вам все возможности разрабатываемых нами сайтов.

Начните проект

вместе с нами, и ваши идеи воплотятся в жизнь

Спасибо за заявку!

Наш менеджер скоро с Вами свяжется.

Walnut Team

Canvas. Идентификаторы, теги и анимация. Урок 10 курса «Tkinter»

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

В Tkinter существует два способа «пометить» фигуры, размещенные на холсте, – это идентификаторы и теги. Первые всегда уникальны для каждого объекта. Два объекта не могут иметь одни и тот же идентификатор. Теги не уникальны. Группа объектов на холсте может иметь один и тот же тег. Это дает возможность менять свойства всей группы. Отдельно взятая фигура на Canvas может иметь как идентификатор, так и тег.

Идентификаторы

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

from tkinter import *
root = Tk()
c = Canvas(width=300, height=300, 
           bg='white')
c.focus_set()
c.pack()
 
ball = c.create_oval(140, 140, 160, 160, 
                     fill='green')
c.bind('<Up>', 
       lambda event: c.move(ball, 0, -2))
c.bind('<Down>', 
       lambda event: c.move(ball, 0, 2))
c.bind('<Left>', 
       lambda event: c.move(ball, -2, 0))
c.bind('<Right>', 
       lambda event: c.move(ball, 2, 0))
 
root.mainloop()

В данном примере круг двигается по холсту с помощью стрелок на клавиатуре. Когда создавался круг, его идентификатор был присвоен переменной ball. Метод move объекта Canvas принимает идентификатор и смещение по осям.

С помощью метода itemconfig можно изменять другие свойства. Метод coords устанавливает новые координаты фигуры, если они заданы. Если указывается только идентификатор или тег, то coords возвращает текущие координаты.

from tkinter import *
root = Tk()
c = Canvas(width=200, height=200,
           bg='white')
c.pack()
 
rect = c.create_rectangle(
    80, 80, 120, 120, fill='lightgreen')
 
 
def in_focus(event):
    c.itemconfig(rect, fill='green', width=2)
    c.coords(rect, 70, 70, 130, 130)
 
 
c.bind('<FocusIn>', in_focus)
 
root.mainloop()

Здесь при получении холстом фокуса (нажать Tab) изменится цвет и размер квадрата.

Теги

В отличие от идентификаторов, которые являются уникальными для каждого объекта, один и тот же тег может присваиваться разным объектам. Дальнейшее обращение к такому тегу позволит изменить все объекты, в которых он был указан. В примере ниже эллипс и линия содержат один и тот же тег, а функция color изменяет цвет всех объектов с тегом group1. Обратите внимание, что в отличие от имени идентификатора (переменная), имя тега заключается в кавычки (строковое значение).

from tkinter import *
 
 
def color(event):
     c. itemconfig('group1', width=3,
                  fill="red")
 
 
root = Tk()
c = Canvas(width=460, height=150, 
           bg='white')
c.pack()
oval = c.create_oval(30, 10, 130, 80, 
                     tag="group1")
c.create_line(10, 100, 450, 100, 
              tag="group1")
c.bind('<Button-3>', color)
root.mainloop()
 

Метод tag_bind позволяет привязать событие (например, щелчок кнопкой мыши) к определенной фигуре на Canvas. Таким образом, можно реализовать обращение к различным областям холста с помощью одного и того же события. Пример ниже иллюстрирует, как изменения на холсте зависят от того, где произведен клик.

from tkinter import *
 
 
def oval_func(event):
    c.delete(oval)
    c.create_text(80, 50,
                  text="Круг")
 
 
def rect_func(event):
    c.delete("rect")
    c.create_text(230, 50,
                  text="Прямоугольник")
 
 
def triangle(event):
    c.delete(trian)
    c.create_text(380, 50,
                  text="Треугольник")
 
 
c = Canvas(width=460, height=100,
           bg='grey80')
c. pack()
 
oval = c.create_oval(30, 10, 130, 80,
                     fill="orange")
c.create_rectangle(180, 10, 280, 80,
                   tag="rect",
                   fill="lightgreen")
trian = c.create_polygon(
    330, 80, 380, 10, 430, 80,
    fill='white', outline="black")
 
c.tag_bind(oval, '<Button-1>', oval_func)
c.tag_bind("rect", '<Button-1>', rect_func)
c.tag_bind(trian, '<Button-1>', triangle)
 
mainloop()
 

Метод delete удаляет объект. Если нужно очистить холст, то вместо идентификаторов или тегов используется константа ALL.

Практическая работа. Анимация в tkinter

В данной программе создается анимация круга, который движется от левой границы холста до правой:

from tkinter import *
 
 
def motion():
    c.move(ball, 1, 0)
    if c.coords(ball)[2] < 300:
        root.after(10, motion)
 
 
root = Tk()
c = Canvas(root, width=300, height=200, 
           bg="white")
c.pack()
ball = c. create_oval(0, 100, 40, 140, 
                     fill='green')
motion()
root.mainloop()

Выражение c.coords(ball) возвращает список текущих координат объекта (в данном случае это ball). Третий элемент списка соответствует его второй координате x.

Метод after вызывает функцию, переданную вторым аргументом, через количество миллисекунд, указанных первым аргументом.

Изучите приведенную программу и самостоятельно запрограммируйте постепенное движение фигуры в ту точку холста, где пользователь кликает левой кнопкой мыши. Координаты события хранятся в его атрибутах x и y (event.x, event.y).

Курс с примерами решений практических работ: android-приложение, pdf-версия.

Тег canvas. HTML справочник | Vaden Pro

Характеристики тега

В каких браузерах работает?
9. 0+6.0+9.6+3.1+4.0+2.1+3.0+
В каких спецификациях используется?
Для чего используется?

Тег позволяет выбрать область, в пределах которой можно будет рисовать, корректировать рисунки и менять их исходные параметры. Процесс рисования выполняется через особые скрипты. Общепринято использовать в качестве языка программирования для подобных случаев — JavaScript. Цвета линий и расскрас рисунка контролируется тоже через скрипты.

Тег <canvas> позволяет создавать не только рисунки, но и анимации, игры и прочее. Довольно часто <canvas> используют для отрисовки графиков зависимостей функций. Это позволяет не прибегать к документу XHTML и его графическим дополнениям, а использовать формат HTML. Возможности данного тега не ограничиваются анимациями, графиками и играми. Умелый веб-разработчики через этот тег создают целые проигрыватели медиа файлов и плееры для воспроизведения музыки и видео.

Сanvas имеет потенциальную возможность обезопасить веб-ресурс от хакерских атак, усложнив каптчу. Суть процесса заключается в том, что в качестве каптчи выступает не картинка, а набор точек, через которые скрипт пишет нужное содержимое для проверки.

Стоит также отметить, что в старых спецификациях HTML этот тег не упоминается. Сведения о нем можно найти только в последней версии HTML 5.

Известно, что <canvas> предназначен для отрисовки только двухмерных рисунков, однако сегодня компания Mozilla Foundation развивает проект, который позволит в canvas рисовать трехмерные объекты. Это будет реализовано благодаря добавки к функционалу ускорители графики нижних уровней.

Как правильно задавать?
<canvas></canvas>
Какие атрибуты поддерживаются?
  • height — определяет высоту области, на которой выполняется рисунок. Изначально тег задает высоту в 300 пикселей.
  • width — определяет ширину области, на которой выполняется рисунок. Изначально тег задает ширину в 150 пикселей.

В дополнение этого, тег поддерживает универсальные атрибуты и события.

Закрытый тег

Да.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <title>Тег canvas</title>
  <meta charset="utf-8">
  <script> 
   window.onload = function() {
    var drawingCanvas = document.getElementById('smile');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // скрипт для вывода окружности 
     context.strokeStyle = "#000";
     context.fillStyle = "#00ccff";
     context.beginPath();
     context.arc(150,150,75,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // скрипт для глаз
     context.fillStyle = "#b8f4ff";
     context.beginPath();
     context.arc(126,135,12,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // скрипт для улыбки
     context. beginPath();
     context.moveTo(105,173);
     context.quadraticCurveTo(150,195,195,173);
     context.quadraticCurveTo(150,225,105,173); 
     context.closePath();
     context.stroke();
     context.fill();
    }
   }
  </script>
 </head>
 <body>
  <canvas>
    <p>Рисунок не удался</p>
  </canvas>
 </body>
</html>

По итогу получаем

Пример показывает, посредством которых простейших функций JavaScript получают картинки. Также пример показывает, как ориентироваться в активном поле Сanvas при указании координат расположения ключевых составляющих изображения. Также для рисунка закодированы команды изменения цвета рисунка. Кодировка цвета в скриптовом коде ничем не отличается от стандартных веб-цветов и шестнадцатеричной системы.

Тег canvas — растровый холст.

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

Авторы не должны использовать canvas элемент в документе, когда доступен более подходящий элемент. Например, нецелесообразно использовать canvas элемент для отображения заголовкa страницы: если желаемое представление заголовка должно быть размечено с использованием соответствующих элементов (как правило, h2), а затем с помощью стилей CSS и поддержкой таких технологий, как XBL.

Когда авторы используют тег canvas, они также должны отдавать контент который передает по существу ту же функцию или цель как и растровые изображения. Эти материалы могут быть размещены внутри canvas элемента. Контент canvas элемента, если таковой имеется, является резервным содержимым.

В интерактивных визуальных медиа средствах, если поддержка сценариев включена для canvas элемента он представляет встроенный контент, состоящий из динамически создаваемых изображений.

В неинтерактивных, статических визуальных средствах массовой информации, если canvas элемент был ранее отрисован (например, если страница была просмотрена в интерактивной визуальной среде и в настоящее время находится в печати, или если некоторые сценарии находятся в процессе отрисовки страницы), то canvas элемент представляет встроенный контент с текущим изображением и размером. В противном случае, элемент представляет свой резервный контент .

В не-визуальных средствах массовой информации, и в визуальных средствах массовой информации, с отключеной поддержкой сценариев для графического элемента или если поддержка canvas элементов была отключена, canvas элемент представляет резервный контент.

Когда canvas элемент представляет встроенный контент, пользователь может сосредоточиться на вложенном контенте (в резервном содержании). Если элемент находится в фокусе, он является объектом взаимодействия с клавиатурой (хотя сам элемент не виден). Это позволяет авторам сделать интерактивное полотно (холст) с клавиатурным доступом. Авторы должны иметь разметку один-к-одному в виде интерактивных регионов в резервном содержании. (Фокус не оказывает никакого влияния на события мыши.)

Графический элемент имеет два атрибута для управления размером пространства координат: width и height(ширина и высота). Эти атрибуты, когда указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами. Правила для разбора целых неотрицательных должны быть использованы для получения их числовых значений. Если атрибут отсутствует, или если разбор его значений возвращает ошибку, то должно использоваться значение по умолчанию. width атрибут по умолчанию 300, а height атрибут по умолчанию до 150.

: элемент графического полотна — HTML: язык разметки гипертекста

Атрибуты этого элемента включают в себя глобальные атрибуты.

высота
Высота координатного пространства в пикселях CSS. По умолчанию 150.
moz-opaque Этот API не стандартизирован. Этот устаревший API больше не следует использовать, но, вероятно, он по-прежнему будет работать.
Сообщает полотну, будет ли полупрозрачность фактором.Если холст знает, что нет полупрозрачности, производительность рисования можно оптимизировать. Это поддерживается только браузерами на основе Mozilla; используйте вместо него стандартизованный canvas.getContext ('2d', {alpha: false}) .
ширина
Ширина координатного пространства в пикселях CSS. По умолчанию 300.

Альтернативный контент

Вы можете (и должны) предоставить альтернативный контент внутри блока . Этот контент будет отображаться как в старых браузерах, которые не поддерживают холст, так и в браузерах с отключенным JavaScript.Предоставление полезного резервного текста или суб-модели DOM помогает сделать холст более доступным.

Обязательный тег

В отличие от элемента , элемент требует закрывающего тега ( ).

Изменение размера холста с помощью CSS по сравнению с HTML

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

Лучше указать размеры холста, установив атрибуты width и height непосредственно в элементах , либо непосредственно в HTML, либо с помощью JavaScript.

Максимальный размер холста

Максимальный размер элемента очень велик, но точный размер зависит от браузера. Ниже приведены некоторые данные, которые мы собрали из различных тестов и из других источников (например, Stack Overflow):

Браузер Максимальная высота Максимальная ширина Максимальная площадь
Хром 32767 пикселей 32767 пикселей 268 435 456 пикселей (т.е., 16,384 х 16,384)
Firefox 32767 пикселей 32767 пикселей 472 907 776 пикселей (т. Е. 22 528 x 20 992)
Safari 32767 пикселей 32767 пикселей 268 435 456 пикселей (т. Е. 16 384 x 16 384)
IE 8192 пикселей 8192 пикселей?

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

HTML

Этот фрагмент кода добавляет элемент холста в ваш HTML-документ. Резервный текст предоставляется, если браузер не может отобразить холст или если не может прочитать холст.

  <холст>
  Альтернативный текст, описывающий, что отображает ваш холст.

JavaScript

Затем в коде JavaScript вызовите HTMLCanvasElement.getContext () , чтобы получить контекст рисования и начать рисование на холсте:

  const холст = документ.querySelector ('холст');
const ctx = canvas.getContext ('2d');
ctx.fillStyle = 'зеленый';
ctx.fillRect (10, 10, 100, 100);

Результат

Альтернативное содержимое

Элемент сам по себе является растровым изображением и не предоставляет информацию о каких-либо нарисованных объектах. Содержимое холста не предоставляется инструментам доступности, как семантический HTML. В общем, вам следует избегать использования холста на доступном веб-сайте или в приложении. Следующие руководства помогут сделать его более доступным.

Таблицы BCD загружаются только в браузере

Тег HTML 5

Тег HTML используется для создания графики «на лету». Его можно использовать для рендеринга графиков, игровой графики или других визуальных изображений.

Для рисования на холсте тег используется вместе с методом getContext (contextId) .

Любое содержимое между тегами является «резервным содержимым», то есть оно будет отображаться только в том случае, если холст не может быть отображен.

Тег был введен в HTML 5.

Атрибуты

HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру дополнительную информацию о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки.Вот пример: style = "color: black;" .

Есть 3 вида атрибутов, которые вы можете добавлять в свои HTML-теги: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

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

Атрибуты, зависящие от элемента

В следующей таблице показаны атрибуты, относящиеся к этому тегу / элементу.

Атрибут Описание
ширина Задает ширину холста в пикселях.Значение по умолчанию — 300.

Возможные значения:

[Целое неотрицательное число] (например, 300)

высота Задает высоту холста в пикселях. Значение по умолчанию — 150.

Возможные значения:

[Целое неотрицательное число] (например, 150)

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к элементам dialog ).

  • ключ доступа
  • автокапитализация
  • класс
  • с контентом
  • данные- *
  • дирек
  • перетаскиваемый
  • скрыто
  • id
  • режим ввода
  • -
  • идентификатор товара
  • itemprop
  • itemref
  • позиций сфера действия
  • тип позиции
  • язык
  • часть
  • слот
  • проверка орфографии
  • стиль
  • tabindex
  • титул
  • перевести

Полное описание этих атрибутов см. В разделе «Глобальные атрибуты HTML 5».

Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.

  • onabort
  • onauxclick
  • onblur
  • отмена
  • oncanplay
  • oncanplaythrough
  • на замену
  • onclick
  • вкл.
  • контекстное меню
  • копия
  • на смену
  • врезка
  • ondblclick
  • ондраг
  • ондрагенд
  • ондрагентер
  • ондрагэксит
  • ondragleave
  • ондраговер
  • ондрагстарт
  • на капле
  • на срок обмена
  • одноразовый
  • завершено
  • ошибка
  • onfocus
  • onformdata
  • на входе
  • недействительно
  • нажатие клавиши
  • onkeypress
  • onkeyup
  • onlanguagechange
  • загрузка
  • onloadeddata
  • загруженные метаданные
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • на мышке над
  • onmouseup
  • паста
  • на паузе
  • в игре
  • в игре
  • в процессе
  • обмен
  • возврат
  • по размеру
  • в прокрутке
  • нарушение политики безопасности
  • востребовано
  • в поиске
  • при выборе
  • на смену
  • установленная
  • при подаче
  • приостановлено
  • ontimeupdate
  • рычаг
  • по объему Изменение
  • ожидает
  • на колесе

Полный список обработчиков событий см. В разделе Атрибуты содержимого обработчика событий HTML 5.

Облако тегов HTML5 Canvas

Перейти к:

TagCanvas — это класс Javascript, который будет рисовать и анимировать HTML5. холст Облако тегов на основе . Я выпускаю его с открытым исходным кодом по лицензии LGPL v3. Ниже приведен пример.

Поскольку холст является частью HTML-страницы, вы можете размещать элементы выше или ниже.

Закрывать

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

Используйте текстовые ссылки Используйте ссылки на изображения Фоновая картинка

Форма облака: цилиндр цилиндр hring vring сфера

Вы нажали: … пока ничего!

В приведенном выше примере я заменил все ссылки на onclick обработчики, чтобы вы не попали на другую страницу при нажатии на любую из теги.

TagCanvas в Internet Explorer

Холст Элемент не поддерживается Internet Explorer версии до версии 8 включительно. Однако указанное выше облако тегов должно быть работа в IE благодаря включаемому файлу ExplorerCanvas Javascript который переводит функции холста в IE VML. Это немного медленно, но это действительно так работай. По большей части.

На момент написания вы должны использовать последнюю транковую версию ExplorerCanvas, так как текущая версия в области загрузок проекта не иметь необходимую поддержку вывода текста.

Еще раз обратите внимание: исчезновение тегов изображений с расстоянием не работает с текущая версия Explorer Canvas. Я создал модифицированную версию excanvas.js, чтобы он работал, который вы можете получить отсюда. Если вы не используете теги изображений или не хотите, чтобы изображения исчезали с расстоянием, тогда вам следует использовать последнюю версию с сайта кода Google, указанного выше.

Internet Explorer 9 поддерживает элемент холста, поэтому excanvas. js не требуется. Условный комментарий, необходимый для включения excanvas.js для более ранних версий следует выглядят так:

Изображения

TagCanvas 1.3 была первой версией, поддерживающей ссылки на изображения — первое изображение найденный внутри ссылки будет использоваться вместо любого текста. Нажмите «Использовать изображение» ссылки »под примером облака тегов выше, чтобы увидеть его в действии.

Акселерометр / датчик движения

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

Вес тегов

Начиная с версии 1.6 TagCanvas поддерживает взвешивание тегов. Взгляните на TagCanvas с взвешенными на странице тегов для получения более подробной информации и примера.

Другие примеры

Это еще один холст

И еще один холст

Еще два соседних примера. Щелчок по тегу в первом перезагружает второй с другим содержимым.

Загрузки

Сценарий TagCanvas доступен как отдельная версия и как jQuery. плагин.Обе версии доступны в виде полного исходного кода и уменьшенной версии в таблице. ниже.

Если на вашем веб-сайте уже используется jQuery, то версия плагина jQuery является один для тебя. Если вы используете другую библиотеку Javascript или вообще не используете ее, автономная версия будет работать сама по себе.

Если вы не собираетесь изменять код сценария TagCanvas, вам следует используйте минифицированную версию скрипта — миниатюрные версии есть вокруг На 30% меньше, чем у несжатых версий.

Уменьшенные версии файлов были сжаты с использованием Yahoo! Компрессор YUI.

Загрузите мою модифицированную версию Explorer Canvas здесь: excanvas.zip. Исходный код Explorer Canvas находится на Сайт с кодом Google.

Проекты с использованием TagCanvas

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

Помогите!

Как обычно, этот код не дает никаких гарантий. Но если вы застряли, обнаружите какие-либо ошибки или у вас есть предложения по улучшению, свяжитесь со мной по обычный адрес: graham (at) goat1000.com.

«Вернуться к началу страницы Инструкции по установке »

Тег HTML

canvas — Studytonight

Тег HTML был введен в HTML5 для отображения 2D-форм и графики на веб-странице с использованием JavaScript.Этот тег позволяет создавать графиков , игр , изображений и других визуальных элементов на веб-странице.

По умолчанию тег в HTML имеет ширину 300 пикселей и высоту 150 пикселей без рамки или содержимого. Мы можем заполнить визуальные элементы, такие как графика, рисунки или изображения на холсте HTML, с помощью JavaScript.

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

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

Максимальный размер тега составляет очень большой , но его точный размер зависит только от браузера.

Кроме того, это элемент уровня блока .

HTML

Тег — синтаксис и использование

Для элемента требуется начальный (открывающий) тег , и конечный (закрывающий) тег .

  <холст>
    ...

HTML

Атрибуты тега

Тег поддерживает глобальные атрибуты и атрибуты событий. Некоторые из общих атрибутов, используемых с этим тегом, приведены ниже:

Атрибуты Описание
высота Этот атрибут используется для указания высоты холста в пикселях.
ширина Этот атрибут используется для указания ширины холста в пикселях.
moz-непрозрачный Этот атрибут используется для управления прозрачностью холста
id Атрибут id используется для указания уникального имени элемента. Атрибут id элемента холста используется для получения ссылки на холст в Javascript для добавления к нему графики.
стиль Атрибут стиля используется для указания кода стиля CSS.

HTML

Базовый пример тега

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

1. Простой тег холста

В приведенном ниже HTML-коде мы только что использовали тег в нашем HTML-теге, это не окажет никакого визуального эффекта на веб-странице, за исключением дополнительного места, которое будет занимать тег холста.

  
    
         Простой холст

Будет просто ширина по умолчанию 300 пикселей и высота 150 пикселей .

Мы можем использовать атрибут style , чтобы добавить стиль к этому тегу, например, добавить границу, чтобы узнать границы холста.См. Пример кода ниже:

  
    
         Простой холст

Если вы запустите приведенный выше код, вы увидите прямоугольник с черной рамкой , шириной по умолчанию 300 пикселей и высотой 150 пикселей .

2. Тег Canvas с графикой (с использованием JavaScript)

В этом примере мы собираемся заполнить , создать прямоугольную форму внутри холста и предоставить ей цвет фона, используя свойство fillstyle и метод fill () , добавить границу, используя lineWidth и strokeStyle и метод stroke () .

В JavaScript мы можем получить доступ к тегу холста с помощью атрибута id , а для добавления к нему графики мы используем метод canvas.getContext ("2d") , чтобы получить контроль над контекстом холста. Метод getContext () может принимать такие значения, как 2d , webgl , webgl2 и т. Д.

3. Тег Canvas с текстом (с использованием JavaScript)

В этом примере мы узнаем, как рисовать текст на элементе холста.

В приведенном выше примере мы использовали метод fillText () для предоставления текста и свойство font для добавления стиля текста.

Стиль CSS по умолчанию для HTML

Тег

По умолчанию к тегу применяется следующий стиль CSS.

  холст {
  высота: 150 пикселей;
  ширина: 300 пикселей;
}

Браузер Поддержка HTML

тег

Следующие браузеры поддерживают этот атрибут:

  • Firefox 2+

  • Google Chrome 4+

  • Internet Explorer 9+

  • Apple Safari 3.1+

  • Опера 9+

Ссылка на холст HTML5 | RGraph

Описание: Ссылка на функции и настройки API тега холста HTML5. Приведены примеры, которые помогут вам освоить API. В блоге RGraph также есть больше примеров использования тега canvas.

Узнайте, как использовать API тегов холста


С новой спецификацией HTML5 добавлен целый ряд новых возможностей, включая новый тег —. Этот тег эффективно как лист бумаги на вашей странице, на котором вы можете рисовать, и это то, что большая часть библиотеки RGraph основана на. Рисунок готов с помощью JavaScript, и вам доступен целый набор функций для рисования фигур и строки с.

Поскольку использует методологию «выстрелил и забыл», DOM не существует. чтобы вы уже получили ссылки на формы нарисованный на холсте — значит, вы должны помнить координаты фигур себя.Именно поэтому тег такой быстрый.

Несмотря на это, был добавлен объект Path3D , а также другие новые функции, у которых есть было указано W3C, что позволит вам сохранить информацию о пути и проверить в более позднее время для совпадений и т. д. Объект Path3D является описано здесь. Итак, к информации!

Элемент холста

Состояние полотна

Рисование прямоугольников

Функции пути

Варианты линея

Варианты цвета

Изображения

Преобразования

Текст

Свойства тени

Манипуляции с пикселями

Другое

canvas — The Canvas Post

Отправьте презентационное предложение для TEACHx, вернемся 11-13 мая!

Размещено 21 января 2021 г.

TEACHx, ежегодный симпозиум Северо-Западного региона, на который собираются преподаватели, студенты, обучающиеся дизайнеры и специалисты по технологиям, чтобы продемонстрировать инновационные эксперименты и отметить успехи в преподавании и… Прочитайте больше
Вопросы и ответы по совместным или двухэтапным экзаменам

Опубликовано 15 декабря, 2020

Обычно экзамены рассматриваются как оценка знаний отдельного учащегося в определенный момент времени. Переворачивая эту идею с ног на голову … Прочитайте больше
Доступно обучение по запросу для Canvas, Zoom и Panopto

Опубликовано: 12 ноября, 2020

Мы все сделали это. Вы регистрируетесь на тот тренинг, семинар или вебинар, который вам действительно нужен, но когда придет время войти в систему? … Прочитайте больше
Обновления политики отображения и выставления оценок для меню курса Canvas

Опубликовано 21 октября 2019 г.

В минувшие выходные создатели Canvas обновили внешний вид меню на сайте вашего курса и упростили политику выставления оценок в … Прочитайте больше
Нужна помощь в размышлениях о летних курсах?

Опубликовано 14 июня, 2017

Лето уже здесь! Преподаватели, которые преподают в этом квартале, должны знать, что Служба Поддержки Преподавателей (FSS) работает все лето, чтобы помочь вам… Прочитайте больше
Проблемы с прикреплением входящих сообщений Canvas Продолжить

Размещено 25 мая 2017 г.

Это сообщение касается известной проблемы при отправке вложений в папке «Входящие» Canvas (система электронной почты в Canvas). Когда электронное письмо отправлено из … Прочитайте больше
Использование объявлений в качестве домашней страницы курса

Размещено 23 мая 2017 г.

Ранее в этом году в Canvas была добавлена ​​новая функция, которая позволяет отображать объявления курса в верхней части домашней страницы курса… Прочитайте больше
Что нам делать с данными (холста)?

Опубликовано: 8 мая, 2017 г.

«Какую роль студенты играют в аналитике, помимо сбора данных?» и «Что нам нужны данные для образования и где они должны … Прочитайте больше
Обмен идеями с Yellowdig

Размещено 3 апреля 2017 г.

Что, если бы ваши ученики могли поделиться статьями на тему, которую вы обсуждали в классе на прошлой неделе, или поделиться видео о концепции… Прочитайте больше
Ч-ч-ч-перемен: Что ты хочешь, чтобы я сделал?

Размещено 21 февраля 2017 г.

На недавней конференции мы с двумя коллегами убедили участников нашего сеанса сыграть разные роли в ролевой игре. В одном у нас было … Прочитайте больше

Введение в jCanvas: jQuery соответствует HTML5 Canvas

HTML5 позволяет рисовать графику прямо на веб-странице с помощью элемента и связанного с ним API JavaScript.

В этом посте я собираюсь познакомить вас с jCanvas, бесплатной библиотекой на основе jQuery с открытым исходным кодом для HTML5 Canvas API.

Если вы разрабатываете с помощью jQuery, jCanvas упрощает и ускоряет кодирование классных рисунков холста и интерактивных приложений с использованием синтаксиса jQuery.

Что такое jCanvas?

На веб-сайте jCanvas поясняется:

jCanvas — это библиотека JavaScript, написанная с использованием jQuery и для jQuery, которая обтекает API холста HTML5, добавляя новые функции и возможности, многие из которых можно настраивать.Возможности включают слои, события, перетаскивание, анимацию и многое другое.

В результате получился гибкий API-интерфейс, обернутый слащавым синтаксисом в стиле jQuery, который привносит мощность и легкость в основу HTML5.

jCanvas позволяет вам делать все, что вы можете, с помощью собственного Canvas API и многого другого. При желании вы также можете использовать собственные методы HTML5 Canvas API с jCanvas. Метод draw () служит именно этой цели. Кроме того, вы можете легко расширить jCanvas своими собственными методами и свойствами, используя его функцию extend ().

Добавление jCanvas в ваш проект

Чтобы включить jCanvas в свой проект, загрузите скрипт с официального сайта или со страницы GitHub, затем включите его в папку проекта. Как уже упоминалось, для работы jCanvas необходим jQuery, поэтому обязательно включите и его.

Файлы сценариев вашего проекта будут выглядеть примерно так:

Последний — туда, где вы помещаете свой собственный JavaScript с помощью jCanvas API. Теперь давайте протестируем jCanvas.

Настройка HTML-документа

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

  <холст>
  
 Это резервный контент
  для пользователей вспомогательных технологий
  или браузеров, в которых нет
  полная поддержка Canvas API.

Вот несколько интересных моментов в приведенном выше фрагменте кода.

  • По умолчанию размеры поверхности рисования составляют 300 на 150 пикселей. Вы можете изменить этот размер по умолчанию в атрибутах ширины и высоты внутри разметки элемента.
  • Добавление атрибута id не требуется, но это простой способ получить доступ к элементу с помощью JavaScript.
  • Содержимое внутри элемента — это просто растровое изображение.Это делает недоступным для пользователей вспомогательных технологий. Кроме того, браузеры, не поддерживающие Canvas API, не смогут получить доступ к его содержимому или каким-либо образом с ним взаимодействовать. Поэтому, хотя методы, направленные на повышение доступности , еще не доступны, добавление некоторого резервного содержимого для этой категории пользователей является рекомендуемой практикой.

Если бы вы использовали собственный Canvas API, ваш JavaScript выглядел бы примерно так:

  var canvas = document.getElementById ('myCanvas'),
    context = canvas.getContext ('2d');

Переменная context в приведенном выше коде хранит ссылку на свойство 2D context объекта Canvas. Это свойство позволяет вам получить доступ ко всем другим свойствам и методам, предоставляемым HTML5 Canvas API.

Если вы хотите узнать больше по этой теме, вам стоит прочитать «Учебник HTML5 Canvas: Введение» Ивайло Герчева.

Методы и свойства jCanvas уже содержат ссылку на 2D-контекст, поэтому вы можете сразу перейти к рисованию.

Рисование фигур с помощью jCanvas

Большинство методов jCanvas принимают карту пар свойство-значение, которую вы можете перечислить в любом порядке.

Начнем с рисования прямоугольника.

Прямоугольник

Вот как вы рисуете прямоугольную форму с помощью метода drawRect () объекта jCanvas.

 
var $ myCanvas = $ ('# myCanvas');


$ myCanvas.drawRect ({
  fillStyle: 'стальной синий',
  strokeStyle: 'синий',
  strokeWidth: 4,
  х: 150, у: 100,
  fromCenter: ложь,
  ширина: 200,
  высота: 100
});

Приведенный выше фрагмент кэширует объект холста в переменную с именем $ myCanvas .Свойства внутри метода drawRect () в основном не требуют пояснений, но вот краткое изложение:

  • fillStyle устанавливает цвет фона прямоугольника;
  • strokeStyle устанавливает цвет границы;
  • strokeWidth устанавливает ширину границы фигуры;
  • x и y задают координаты, соответствующие положению прямоугольника по горизонтали и по вертикали внутри холста. Значение 0 для x и 0 для y , то есть (0, 0), соответствует левому верхнему углу холста. Координаты x увеличиваются вправо, а координаты y увеличиваются к нижней части холста. При рисовании прямоугольника по умолчанию jCanvas принимает координаты x и y , чтобы они находились в центре формы.
  • Чтобы изменить это так, чтобы x и y соответствовали левому верхнему углу прямоугольника, установите для свойства fromCenter значение false .
  • Наконец, свойства width и height задают размеры прямоугольника.

Вот демонстрация прямоугольной формы:

См. Пример Pen jCanvas: Прямоугольник от SitePoint (@SitePoint) на CodePen.

Дуги и окружности

Дуги — это части обода круга. С jCanvas рисование дуг — это просто вопрос установки желаемых значений для нескольких свойств внутри метода drawArc () :

  $ myCanvas.drawArc ({
  strokeStyle: 'стальной синий',
  strokeStyle: 'синий',
  strokeWidth: 4,
  х: 300, у: 100,
  радиус: 50,
  
  начало: 0, конец: 200
});

Рисование дуг включает в себя установку значения для свойства радиус , а также углов start и end в градусах. Если вы хотите, чтобы дуга была направлена ​​против часовой стрелки, добавьте свойство ccw в приведенный выше код и установите для него значение true .

Вот демонстрация CodePen вышеуказанного кода:

См. Пример Pen jCanvas: Arc от SitePoint (@SitePoint) на CodePen.

Нарисовать круг так же просто, как опустить свойства start и end из метода drawArc () .

Например, вот как вы можете нарисовать простое изображение улыбающегося лица, используя только дугу:

  $ myCanvas.drawArc ({
  
  fillStyle: 'желтый',
  strokeStyle: '# 333',
  strokeWidth: 4,
  х: 300, у: 100,
  радиус: 80
}). drawArc ({
  
  fillStyle: '# 333',
  strokeStyle: '# 333',
  х: 250, у: 70,
  радиус: 5
}). drawArc ({
  
  fillStyle: '# 333',
  strokeStyle: '# 333',
  х: 350, у: 70,
  радиус: 5
}).drawArc ({
  
  strokeStyle: '# 333',
  strokeWidth: 4,
  ccw: true,
  х: 300, у: 100,
  радиус: 30,
  начало: 0,
  конец: 200
}). drawArc ({
  
  strokeStyle: '# 333',
  strokeWidth: 4,
  х: 300, у: 135,
  радиус: 30,
  начало: 90,
  конец: 280
});

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

Вот как приведенный выше код отображается в браузере:

См. Пример Pen jCanvas: Улыбающееся лицо от SitePoint (@SitePoint) на CodePen.

Рисование линий и контуров

Вы можете быстро рисовать линии с помощью jCanvas, используя метод drawLine () и вычерчивая серию точек, с которыми ваши линии будут соединяться.

  $ myCanvas.drawLine ({
  strokeStyle: 'стальной синий',
  strokeWidth: 10,
  округлено: правда,
  закрыто: правда,
  x1: 100, y1: 28,
  х2: 50, у2: 200,
  x3: 300, y3: 200,
  x4: 200, y4: 109
});

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

См. Пример Pen jCanvas: Подключенные линии с помощью SitePoint (@SitePoint) на CodePen.

Вы также можете рисовать гибкие контуры с помощью метода drawPath (). Думайте о пути как о одной или нескольких соединенных линиях, дугах, кривых или векторах.

Метод drawPath () принимает карту точек и карту с координатами x и y для подпутей внутри каждой точки. Вам также необходимо указать тип пути , который вы собираетесь нарисовать, например.г., линия, дуга и др.

Вот как вы можете нарисовать пару соединенных горизонтально и вертикально указывающих стрелок с помощью drawPath () и рисования стрелок (), последний из которых является удобным методом jCanvas, который позволяет быстро нарисовать форму стрелки на холсте:

  $ myCanvas.drawPath ({
  strokeStyle: '# 000',
  strokeWidth: 4,
  х: 10, у: 10,
  p1: {
    тип: 'линия',
    x1: 100, y1: 100,
    x2: 200, y2: 100
  },
  p2: {
    тип: 'линия',
    округлено: правда,
    endArrow: правда,
    arrowRadius: 25,
    arrowAngle: 90,
    x1: 200, y1: 100,
    x2: 290, y2: 100
 },
 p3: {
   тип: 'линия',
   округлено: правда,
   endArrow: правда,
   стрелка Радиус: 25,
   arrowAngle: 90,
   x1: 100, y1: 100,
   x2: 100, y2: 250
  }
});

Координаты x и y каждого подпути относительно координат x и y всего пути.

И вот результат:

См. Пример Pen jCanvas: Connected Arrows от SitePoint (@SitePoint) на CodePen.

Текст чертежа

Вы можете быстро нарисовать текст на холсте с помощью метко названного метода drawText (). Основные свойства, необходимые для работы:

  • текст . Задайте для этого свойства текстовое содержимое, которое вы хотите отображать на холсте: например, «Привет, мир»
  • fontSize . Значение этого свойства определяет размер текста на холсте.Вы можете установить значение этого свойства с помощью числа, которое jCanvas интерпретирует как значение в пикселях: fontSize: 30 . В качестве альтернативы вы можете использовать точки, но в этом случае вам нужно указать размер внутри кавычек: fontSize: '30pt'
  • fontFamily позволяет указать шрифт для вашего текстового изображения: 'Verdana, sans-serif' .

Вот пример кода:

  $ myCanvas.drawText ({
  текст: "Холст - это весело",
  fontFamily: 'cursive',
  fontSize: 40,
  х: 290, у: 150,
  fillStyle: 'голубой',
  strokeStyle: 'синий',
  strokeWidth: 1
});

Вот как это выглядит внутри элемента на веб-странице:

См. Пример Pen jCanvas: Рисование текста с помощью SitePoint (@SitePoint) на CodePen.

Рисование изображений

Вы можете импортировать изображения и управлять ими с помощью метода drawImage (). Вот пример:

  $ myCanvas.drawImage ({
  источник: 'imgs / cat.jpg',
  х: 250, у: 100,
  fromCenter: ложь,
  shadowColor: '# 222',
  shadowBlur: 3,
  поворот: 40
});

И вот как выглядит приведенный выше код:

См. Пример Pen jCanvas: Импорт изображения и управление им с помощью SitePoint (@SitePoint) на CodePen.

Вы можете просмотреть и поиграть со всеми приведенными выше примерами, объединенными в одну демонстрацию CodePen здесь.

Слои холста

Если вы когда-либо использовали приложение для редактирования изображений, такое как Photoshop или GIMP, вы уже знакомы со слоями. Крутая часть работы со слоями заключается в том, что вы получаете возможность управлять каждым изображением на холсте индивидуально, рисуя его на отдельном слое.

jCanvas предлагает мощный API слоев, который добавляет гибкости вашим проектам на основе холста.

Вот обзор того, как использовать слои jCanvas.

Добавление слоев

На каждом слое можно нарисовать только один объект.Вы можете добавлять слои в свой проект jCanvas одним из двух способов:

  • Используйте метод addLayer () , за которым следует метод drawLayers ()
  • Установите для свойства слоя значение true внутри любого из методов рисования

Вот как вы применяете первую технику рисования синего прямоугольника.

  $ myCanvas.addLayer ({
  тип: 'прямоугольник',
  fillStyle: 'стальной синий',
  fromCenter: ложь,
  name: 'blueRectangle',
  х: 50, у: 50,
  ширина: 400, высота: 200
}).drawLayers ();

См. Перо PZeNGp от SitePoint (@SitePoint) на CodePen.

А вот как применить второй метод, чтобы нарисовать тот же прямоугольник:

  $ myCanvas.drawRect ({
  fillStyle: 'стальной синий',
  слой: правда,
  name: 'blueRectangle',
  fromCenter: ложь,
  х: 50, у: 50,
  ширина: 400, высота: 200
});

См. Pen zrjqKb от SitePoint (@SitePoint) на CodePen.

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

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

Давайте посмотрим, как мы можем это сделать.

Анимация слоев

Вы можете быстро добавлять анимацию к рисункам на основе слоев с помощью jCanvas, используя метод animateLayer ().Этот метод принимает следующие параметры:

  • Уровень , индекс или , имя
  • Объект с парами "ключ-значение" свойств для анимации
  • Продолжительность анимации миллисекунд. Это необязательный параметр. Если вы не устанавливаете его, по умолчанию используется значение 400
    • .
  • ослабление анимации. Это также необязательный параметр, если вы не устанавливаете его, по умолчанию используется значение swing
    • .
  • Необязательная функция обратного вызова, которая запускается после завершения анимации.

Давайте посмотрим, как работает метод animateLayer () . Мы нарисуем полупрозрачный оранжевый круг на слое, затем анимируем его положение, цвет и непрозрачность:

 
$ myCanvas.drawArc ({
  name: 'orangeCircle',
  слой: правда,
  х: 50, у: 50,
  радиус: 100,
  fillStyle: 'оранжевый',
  непрозрачность: 0,5
});


$ myCanvas.animateLayer ('orangeCircle', {
  х: 150, у: 150,
  радиус: 50,
}, 1000, функция (слой) {
  $ (this) .animateLayer (layer, {
    fillStyle: 'темно-красный',
    х: 250, у: 100,
    непрозрачность: 1
  }, 'медленный', 'легкость выхода');
});

Посмотрите демонстрацию ниже, чтобы увидеть анимацию:

См. Пример Pen jCanvas: Анимация слоев с помощью SitePoint (@SitePoint) на CodePen.

Вы можете просмотреть все три предыдущих примера, объединенные в этой демонстрации CodePen.

Перетаскиваемые слои

Еще одна интересная функция, на которую я хотел бы обратить ваше внимание, - это возможность превратить обычный слой jCanvas в перетаскиваемый слой, просто установив для свойства draggable значение true .

Вот как:

  $ myCanvas.drawRect ({
  слой: правда,
  перетаскиваемый: правда,
  приноситьТоФронт: правда,
  name: 'blueSquare',
  fillStyle: 'стальной синий',
  х: 250, у: 150,
  ширина: 100, высота: 100,
  поворот: 80,
  shadowX: -1, shadowY: 8,
  shadowBlur: 2,
  shadowColor: 'rgba (0, 0, 0, 0.8) '
})
.drawRect ({
  слой: правда,
  перетаскиваемый: правда,
  приноситьТоФронт: правда,
  имя: 'redSquare',
  fillStyle: 'красный',
  х: 190, у: 100,
  ширина: 100, высота: 100,
  поворот: 130,
  shadowX: -2, shadowY: 5,
  shadowBlur: 3,
  shadowColor: 'rgba (0, 0, 0, 0,5)'
});

Фрагмент выше рисует два перетаскиваемых прямоугольных слоя, включая: draggable: true . Также обратите внимание на использование свойства giveToFront , которое гарантирует, что когда вы перетаскиваете слой, он автоматически выталкивается на передний план всех других существующих слоев.

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

Результат выглядит так:

Если вы хотите, чтобы ваше приложение выполняло какие-либо действия до, во время или после перемещения перетаскиваемого слоя, jCanvas упрощает это, поддерживая функции обратного вызова во время соответствующих событий:

  • dragstart срабатывает, когда вы начинаете перетаскивать слой
  • drag срабатывает при перетаскивании слоя
  • dragstop срабатывает, когда вы перестаете перетаскивать слой
  • dragcancel происходит, когда вы перетаскиваете слой за границу поверхности рисования холста.

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

  $ myCanvas. drawRect ({
  слой: правда,

  

  
  dragstop: function (layer) {
    var layerName = layer.name;
    el.innerHTML = 'Слой' + layerName + 'был удален.';
  }
})
.drawRect ({
  слой: правда,

  

  
  dragstop: function (layer) {
    var layerName = слой.имя;
    el.innerHTML = 'Слой' + layerName + 'был удален.';
  }
});

После перетаскивания каждого квадрата вы увидите на странице сообщение о том, какой цветной квадрат вы только что уронили. Попробуйте это в демонстрации ниже:

См. Перетаскиваемые слои jCanvas с функцией обратного вызова от SitePoint (@SitePoint) на CodePen.

Заключение

В этом посте я познакомил вас с jCanvas, новой библиотекой на основе jQuery, которая работает с HTML5 Canvas API.Я проиллюстрировал некоторые методы и свойства jCanvas, которые позволяют быстро рисовать на поверхности холста, добавлять визуальные эффекты, анимацию и перетаскиваемые слои.

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

Для сопровождения этой статьи я собрал базовое приложение для рисования на CodePen, используя метод jCanvas drawLine () :

См. Приложение Pen jCanvas Painting от SitePoint (@SitePoint) на CodePen.

Не стесняйтесь улучшать его, добавляя больше функций и поделившись своими результатами с сообществом SitePoint.

.

No related posts.