Документация JDK 20 — Главная
- Главная
- Ява
- Java SE
- 20
Обзор
- Прочтите меня
- Примечания к выпуску
- Что нового
- Руководство по миграции
- Загрузить JDK
- Руководство по установке
- Формат строки версии
Инструменты
- Технические характеристики инструментов JDK
- Руководство пользователя JShell
- Руководство по JavaDoc
- Руководство пользователя средства упаковки
Язык и библиотеки
- Обновления языка
- Основные библиотеки
- HTTP-клиент JDK
- Учебники по Java
- Модульный JDK
- Руководство программиста API бортового регистратора
- Руководство по интернационализации
Технические характеристики
- Документация API
- Язык и ВМ
- Имена стандартных алгоритмов безопасности Java
- банок
- Собственный интерфейс Java (JNI)
- Инструментальный интерфейс JVM (JVM TI)
- Сериализация
- Проводной протокол отладки Java (JDWP)
- Спецификация комментариев к документации для стандартного доклета
- Прочие характеристики
Безопасность
- Руководство по безопасному кодированию
- Руководство по безопасности
Виртуальная машина HotSpot
- Руководство по виртуальной машине Java
- Настройка сборки мусора
Управление и устранение неполадок
- Руководство по устранению неполадок
- Руководство по мониторингу и управлению
- Руководство по JMX
Client Technologies
- Руководство по специальным возможностям Java
CS307: рисунок на холсте
CS307: рисунок на холсте В этом чтении мы узнаем, как рисовать в 2D на
Элемент HTML5 .
Мы также научимся использовать
хороший конструктор графического интерфейса под названием dat.GUI.
Мотивация
Почему? Многие учебники и курсы по компьютерной графике начинаются с небольшого немного 2D, как небольшая разминка перед погружением в 3D. У меня есть часто избегали этого в прошлом, но в этом семестре, с WebGL, мы не просто изучить ограниченную версию нашей 3D-системы, но изучить другой API, который может быть более подходящим для определенных видов потребности рисования, чем то, что мы будем делать в Three.js. Кроме того, это дает нам возможность поиграть с JavaScript и пакетом dat.GUI, прежде чем получить в сложности Three.js.
Учебники
Многие материалы для этого курса я написал сам, но для
этого, я не видел причин заново изобретать то, что было очень хорошо сделано
другие.
Веб-поиск
для html5
Учебник по холсту должен дать много хороших результатов. Вот три или
четыре:
- МДН Учебник по холсту. Я думаю, что это лучшее знакомство, которое у меня было. найденный. Пожалуйста, прочитайте первые пять страниц этого, пропуская страницу на Изображений. Вы можете просмотреть или опустить раздел о кривых Безье. На страницу о стилях и цветах, вы можете просмотреть или опустить красивую шапку и присоединяйтесь к материалам. Когда вы попадете на страницу преобразований, вы можете остановиться (после прочтения этой страницы). Страница по трансформациям будет большая помогите, когда мы говорим о преобразовании экземпляра примерно через неделю.
- Холст HTML 5 Tutorials имеет правильное название, но, возможно, лучше для справки чем учебник. Определенно погрузитесь в это немного. Это может быть хорошо обзор после предыдущего.
- W3Schools
Холст HTML5. Я многому научился в W3Schools за эти годы,
и у него есть несколько приятных функций.
Я не хочу, чтобы вы в совершенстве разбирались в рисовании холст. Как вы знаете, мы проведем большую часть нашего семестра в 3D, используя Три.js. Тем не менее, попробуйте сделать следующее:
- создать холст
- рисовать прямоугольники, включая прямоугольники с заливкой
- линии розыгрыша
- рисовать круги
- выбрать цвет
- переводить, вращать и масштабировать систему координат. Это поможет когда доберетесь до преобразования экземпляра в Three.js примерно через неделю.
Ниже приведен код, который, надеюсь, вы сможете понять. как только вы прочитали учебник выше.
API для рисования линий и кривых с использованием путей очень двумерный
(это тот же API, что и в языке PostScript, который управляет вашим
принтер), так что не зацикливайтесь на деталях этого языка. Фактически,
многое в этом API напоминает мне PostScript.
API рисования линий может
напомнить вам о Buggles.
Позже в этом семестре мы можем вернуться к холсту, когда доберемся до Кривые Безье, поскольку та же функция используется в 3D в Three.js.
Демонстрация: Пример 1
В этом первом примере используется собственная система координат холста с начало координат вверху слева и Y, увеличивающийся вниз.
Вот код, который нарисовал эту картинку. Пожалуйста, потратьте немного времени на изготовление Убедитесь, что вы понимаете это, или задавайте вопросы.
Демонстрация: пример 2
Это аналогичный рисунок, но на этот раз выполненный в системе координат. где начало координат находится внизу слева, а Y увеличивается вверх, как мы привыкли со школы. Поскольку Y расположение дома и смайлик 200 и высота полотна 300, они расположены иначе.
Вот код, который нарисовал эту картинку. Пожалуйста, потратьте немного времени на изготовление
Убедитесь, что вы понимаете это, или задавайте вопросы.
Однако вы заметите, что
это в основном вопрос наличия, например, y+h вместо
из y-h , чтобы найти координату y верхней части дома.
Демонстрация: Пример 3
Это тот же рисунок, еще раз, но теперь с функциями, которые могут быть вызваны с различными переводами, поворотами и масштабированием, чтобы выход другой экземпляров . Это предварительный просмотр нашего экземпляра трансформация в 3D.
Вот код, который нарисовал эту картинку. Как и прежде, он очень похож на наш предыдущий код, но теперь функции для рисования дома и смайлику не нужно добавлять (x, y) ко всем своим координатам. Кодирование для их намного проще, и не намного сложнее нарисовать экземпляр. Мы также может вращать и масштабировать наши объекты, что было бы очень сложно с кодировкой в версиях 1 и 2.
дат.GUI
Большинство из вас использовали ползунки и другие виджеты HTML5, все
которые очень хороши.
Подключение этих виджетов к коду JavaScript, чтобы
что вы можете управлять кодом и изменять параметры с помощью
виджеты вместо ввода кода — это просто, но немного
скучный.
Некоторые сотрудники Google значительно упростили задачу, упаковав многое из того, что вы хотели бы в довольно хороший пакет. Даже документация красивая простой.
Итак, пожалуйста, прочитайте первые четыре страницы этого объяснения dat.GUI , пакет для создания графического интерфейса для изменения переменных JavaScript. Ты можете пропустить третью страницу (по папкам), если хотите.
Демонстрация с использованием dat.GUI
Прочитав это, вы сможете понять следующее. демо dat.GUI:
‘
Резюме
Вот что, я надеюсь, вы узнали из этого чтения:
- HTML-холст имеет контекст объект, который позволяет делать 2D-чертежи с использованием методов этого объекта.
- Прямоугольники довольно просты. Дуги почти так же просты.
