Чему я научился на JavaScript 30 (веб-курс — https://javascript30.com/)
Сегодня поговорим о рисовании на холсте.
Мы изучили d3, но научиться рисовать только на JS тоже интересно.
Но я не хочу делать слишком много заметок по этой статье, потому что здесь не так много сложных вещей, и я считаю, что лучший способ использовать или изучить эти функции рисования — это попробовать.
Итак, здесь я составил список руководств, которые могут помочь при попытке.
3 шага к рисованию
En-W3School: 3 шага рисования холста
var canvas = document.getElementById("myCanvas");//находим элемент холста
var ctx = canvas.getContext("2d");//создаем объект
ctx.fillStyle = "#FF0000"; …//рисовать
«2d» — единственный параметр, работающий для холста, что означает 2D. Он может иметь «3d» для 3D-рисования.
Хороший учебник для холста
En-Site: Учебники по HTML5 Canvas
Это хороший веб-сайт, на котором вы можете найти все, что касается рисования на холсте (кроме слишком большого количества рекламы).
Прослушиватель событий
En-MDN: Прослушиватель событий
Вы можете добавить несколько функций к одному и тому же событию или одну и ту же функцию к другому элементу.
element.addEventListener («щелчок», myFunction);
element.addEventListener («щелчок», mySecondFunction);
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
