Главная›Продвинутый web-дизайнер›Урок 29

Canvas

Canvas — холст, на котором JavaScript рисует фигуры, линии и текст. На нём делают игры и графики.

📋 Заданий: 6✅ С автопроверкой: 4✨ Новых: 2

🖌️Методы canvas

Как вызвать	Что делает
`ctx = canvas.getContext('2d')`	Получить «кисть» для рисования на холсте
`ctx.fillRect(x, y, w, h)`	Закрашенный прямоугольник
`ctx.fillStyle = 'color'`	Цвет заливки фигур
`ctx.strokeRect(x, y, w, h)`	Прямоугольник-контур
`ctx.strokeStyle = 'color'`	Цвет контура
`ctx.clearRect(x, y, w, h)`	Стереть прямоугольную область
`ctx.font = '30px Arial'`	Выбор шрифта
`ctx.fillText('Text', x, y)`	Закрашенный текст
`ctx.strokeText('Text', x, y)`	Текст-контур
`ctx.beginPath()`	Начать рисовать свою фигуру
`ctx.moveTo(x, y)`	Переместить кисть (не рисуя)
`ctx.lineTo(x, y)`	Провести линию до точки
`ctx.stroke()`	Обвести путь
`ctx.fill()`	Залить фигуру цветом
`ctx.closePath()`	Замкнуть фигуру
`ctx.arc(x, y, radius, startAngle, endAngle)`	Дуга. Круг: `ctx.arc(100, 100, 40, 0, Math.PI * 2)`

🎨Задания

Сетка на холсте

среднеавтопроверка

С помощью canvas и циклов расчерти холст 400 × 400 на вертикальные и горизонтальные линии через каждые 40px и подпиши номера клеток.

Показать ответ (сначала попробуй сам!)

let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')

let step = 40

for (let i = 1; i < 10; i++) {
    ctx.beginPath()
    ctx.moveTo(step * i, 0)
    ctx.lineTo(step * i, 400)
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(0, step * i)
    ctx.lineTo(400, step * i)
    ctx.stroke()
}

for (let i = 0; i < 10; i++) {
    ctx.fillText(i, step * i + 4, 12)
}

Открыть готовую страницу с ответом ↗

Шахматная доска

среднеавтопроверка

С помощью canvas и двух вложенных циклов нарисуй шахматную доску 8 × 8 из клеток по 50px. Левая верхняя клетка — светлая (white), соседняя — тёмная (#333).

Подсказка

Клетка тёмная, если (i + j) % 2 === 1.

Показать ответ (сначала попробуй сам!)

let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')

for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
        if ((i + j) % 2 === 1) {
            ctx.fillStyle = '#333'
        } else {
            ctx.fillStyle = 'white'
        }
        ctx.fillRect(i * 50, j * 50, 50, 50)
    }
}

Открыть готовую страницу с ответом ↗

Мир с физикой столкновений

сложнов VS Code

Создай «мир», в котором шарики летают и отскакивают от стен и друг от друга.

🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!

Показать ответ (сначала попробуй сам!)

Открыть готовую страницу с ответом ↗

Свой Paint

сложнов VS Code

Создай аналог программы Paint: рисование мышкой, выбор цвета и толщины кисти.

Показать ответ (сначала попробуй сам!)

Открыть готовую страницу с ответом ↗

Смайлик на canvas

легконовоеавтопроверка

Нарисуй смайлик на холсте 400 × 400:

лицо — жёлтый (gold) круг с центром (200, 200) и радиусом 150
глаза — чёрные круги радиусом 20 в точках (140, 160) и (260, 160)
улыбка — дуга: ctx.arc(200, 220, 80, 0, Math.PI)

Показать ответ (сначала попробуй сам!)

let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')

ctx.fillStyle = 'gold'
ctx.beginPath()
ctx.arc(200, 200, 150, 0, Math.PI * 2)
ctx.fill()

ctx.fillStyle = 'black'
ctx.beginPath()
ctx.arc(140, 160, 20, 0, Math.PI * 2)
ctx.fill()
ctx.beginPath()
ctx.arc(260, 160, 20, 0, Math.PI * 2)
ctx.fill()

ctx.lineWidth = 8
ctx.beginPath()
ctx.arc(200, 220, 80, 0, Math.PI)
ctx.stroke()

Домик

средненовоеавтопроверка

Нарисуй домик:

стены — коричневый (saddlebrown) прямоугольник: x = 100, y = 200, ширина 200, высота 150
крыша — красный (red) треугольник с вершинами (100, 200), (200, 100), (300, 200) — используй beginPath, moveTo, lineTo, fill
окно — голубой (skyblue) квадрат 50 × 50 в точке (175, 240)

Показать ответ (сначала попробуй сам!)

let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')

ctx.fillStyle = 'saddlebrown'
ctx.fillRect(100, 200, 200, 150)

ctx.fillStyle = 'red'
ctx.beginPath()
ctx.moveTo(100, 200)
ctx.lineTo(200, 100)
ctx.lineTo(300, 200)
ctx.closePath()
ctx.fill()

ctx.fillStyle = 'skyblue'
ctx.fillRect(175, 240, 50, 50)

🔗Полезные ссылки

Что почитать

📚Руководство по canvasdeveloper.mozilla.org 🏋️Практика canvas #1w3schools.com 🏋️Практика canvas #2w3schools.com 📚Физическая модель столкновенийdeveloper.mozilla.org

Предыдущие JS-уроки

🌐Урок 17raferalston.github.io 🌐Урок 18raferalston.github.io 🌐Урок 19raferalston.github.io 🌐Урок 20raferalston.github.io 🌐Урок 21raferalston.github.io 🌐Урок 22raferalston.github.io 🌐Урок 23raferalston.github.io 🌐Урок 24raferalston.github.io 🌐Урок 25raferalston.github.io 🌐Урок 26raferalston.github.io 🌐Урок 27raferalston.github.io 🌐Урок 28raferalston.github.io