HTML <canvas>

Я играл с художественными работами на JavaScript и получал массу удовольствия, создавая блоки div с помощью циклов и изменяя их стиль, вращая их и заставляя их перемещать позицию в DOM.

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

Введите HTML ‹canvas›

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

Создание проекта холста

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

<div id="root">
    <canvas id="first-canvas">
    </canvas>
</div>

Нет, вы не используете CSS.

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

Это своего рода собственный язык.

(стон) Я знаю. Канва справочная библиотека большая, но знакомство с ней открывает массу возможностей. .beginPath () .moveTo (), не говоря уже о синтаксисе стилей, может потребовать некоторого привыкания.

Давайте создадим программу рисования.

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

index.html
index.js
index.css (для стилизации некоторых вещей в нашем HTML-документе)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css" >
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="root">
    <canvas id="first-canvas">
    </canvas>
</div>

<script src="index.js"></script>
</body>
</html>

index.css

* {
    margin: 0;
    padding: 0;

}

#root {
    width: 100vw;
    height: 100vh;
}

index.js

window.addEventListener("load", () => {
  

    window.addEventListener('resize', () => {
        canvas.height = window.innerHeight
        canvas.width = window.innerWidth
    })
})

Начало работы

Вся наша работа будет выполняться на JavaScript. Несколько замечаний: наш HTML-документ содержит тег ‹canvas›, поэтому нам нужно будет вставить его в наш файл JavaScript.

const canvas = document.querySelector("#first-canvas")

Получение .context ()

Теперь нам нужно сообщить системе, в каком контексте мы будем работать с холстом. Мы создаем двухмерный холст, поэтому мы укажем это с помощью переменной. Чтобы не печатать, мы будем использовать "c":

const c = canvas.getContext('2d')

Теперь у нас есть «c», который представляет собой двумерный объект холста, к которому мы можем начать добавлять элементы. «C» - это что-то вроде min-DOM, в которую мы можем добавлять элементы. Здесь в игру вступает справочная библиотека холста.

Стиль

Нам нужно сделать холст большим. В этом случае мы займем всю страницу.

canvas.height = window.innerHeight
canvas.width = window.innerWidth
canvas.style.backgroundColor = "light-blue"

Давайте стилизуем линию, которую мы будем рисовать

c.strokeStyle = "red"
c.lineWidth = '3'

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

Настройка среды

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

let painting = false

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

canvas.addEventListener("mousedown", startPosition)
canvas.addEventListener("mouseup", finishedPosition)
canvas.addEventListener("mousemove", draw)

Не волнуйтесь, startPosition, finishPosition и draw еще не созданы. Мы сделаем это сейчас.

Получите начальную позицию

В startPosition () мы хотим передать наше событие, изменить статус рисования и вызвать функцию рисования.

function startPosition(e) {
    painting = true
    draw(e)
}

Завершить покраску

Как только пользователь перестанет удерживать мышь, мы хотим сделать противоположное тому, что мы сделали в startPosition (), а именно установить для параметра «рисование» значение false и завершить нашу строку. Использование c.beginPath () эффективно «отрезает» линию, которую мы рисуем. Если бы мы этого не сделали, строка продолжилась бы в следующий раз, когда пользователь щелкнет.

function finishedPosition() {
    painting = false
    c.beginPath()
}

Рисунок

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

if(!painting) return

Затем мы устанавливаем параметры нашей линии.

c.lineWidth = 10
c.lineCap = 'round'

Теперь нам нужно указать холсту начальную точку нашей линии, затем нарисовать линию и, наконец, где закончить линию.

c.lineTo(e.clientX, e.clientY)
c.stroke()
c.beginPath()
c.moveTo(e.clientX, e.clientY)

Вся функция выглядит так:

function draw(e) {
    if(!painting) return

    c.lineWidth = 10
    c.lineCap = 'round'

    c.lineTo(e.clientX, e.clientY)
    c.stroke()
    c.beginPath()
    c.moveTo(e.clientX, e.clientY)
}

А вот и файл index.js целиком:

window.addEventListener("load", () => {

    const canvas = document.querySelector("#first-canvas")
    const c = canvas.getContext('2d')

    //eventlistners
    canvas.addEventListener("mousedown", startPosition)
    canvas.addEventListener("mouseup", finishedPosition)
    canvas.addEventListener("mousemove", draw)

    //resize
    canvas.height = window.innerHeight
    canvas.width = window.innerWidth
    canvas.style.backgroundColor = "light-blue"

    c.strokeStyle = "red"
    c.lineWidth = '3'

    //variables
    let painting = false

    function startPosition(e) {
        painting = true
        draw(e)
    }

    function finishedPosition() {
        painting = false
        c.beginPath()
    }

    function draw(e) {
        if(!painting) return

        c.lineWidth = 10
        c.lineCap = 'round'

        c.lineTo(e.clientX, e.clientY)
        c.stroke()
        c.beginPath()
        c.moveTo(e.clientX, e.clientY)
    }

    window.addEventListener('resize', () => {
        canvas.height = window.innerHeight
        canvas.width = window.innerWidth
    })

})

Это быстрый ускоренный курс по холсту!

HTML

Вопросы по теме