Волшебный холст

внешний интерфейс iOS Hexo Canvas

Недавно увидел очень (удобный) буклет в Наггете на Наггете.Как использовать Canvas для создания крутых фоновых эффектов веб-страницы, я думал добавить классный фон в свой блог. Кстати, узнайте, как использовать элемент canvas.

Эффект

окончательный эффектблогВы можете увидеть это выше. Поговорим о том, как это реализовать.

выполнить

Рекомендации холст не знаю, студенты идут учиться буклет Наггетс, я не буду объяснять здесь.

Мой блог создан с помощью Hexo с использованиемArcherТема, стиль верхнего уровня автора блога определяется в файле layout.ejs.

<!DOCTYPE html>
<html>
   ...
    <div class="wrapper">
        ...
    </div>
    ...
</html>

Поскольку вы рисуете классный фон на холсте, вам нужно добавить здесь элемент холста, и он должен быть размером с div:class="wrapper".

Измените файл layout.ejs, чтобы обернуть div:class="wrapper" и наш холст с помощью div:

<!DOCTYPE html>
<html>
    ...
    <div id="container-wrapper-canvas" style="position:relative;">
        <div class="wrapper">
        ...
        </div>
        <canvas id="myCanvas" style="position:absolute;left:0;top:0;z-index:0;pointer-events:none;" />
        <script>
        </script>
        ...
    </div>
    ...
</html>

Поскольку я не хочу, чтобы холст реагировал на события щелчка, добавьте его в свой стиль:

pointer-events:none;

Сначала определите некоторые переменные (следующий код можно засунуть в тег script).

// 屏幕宽高
let container = document.getElementById('container-wrapper-canvas')
let WIDTH = container.offsetWidth
let HEIGHT = container.offsetHeight
// canvas
let canvas = document.getElementById('myCanvas')
let context = canvas.getContext('2d')
// 圆点数量
let roundCount = HEIGHT / 10
// 存放远点属性的数组
let round = []

// 令 canvas 铺满屏幕
canvas.width = WIDTH
canvas.height = HEIGHT

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

// 构造圆点位置颜色大小等属性
function roundItem(index, x, y) {
    this.index = index
    this.x = x
    this.y = y
    this.r = Math.random() * 4 + 1
    let alpha = (Math.floor(Math.random() * 5) + 1) / 10 / 2
    this.color = "rgba(0,0,0," + alpha + ")"
}

рисовать точки

// 画圆点
roundItem.prototype.draw = function() {
    context.fillStyle = this.color
    context.shadowBlur = this.r * 2
    context.beginPath()
    context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false)
    context.closePath()
    context.fill()
}

Здесь это выглядит очень знакомо. Я сталкивался с подобными кодами при разработке пользовательских представлений для Android и iOS, и я рисую картинки в функции draw(). Здесь я думаю, что я могу использовать аналогичный метод, чтобы нарисовать аналогичный фон на мобильной стороне. .

В это время вы можете увидеть статические точки, вызвав функцию инициализации.

// 调用初始化函数
init();
function init() {
    for(var i = 0; i < roundCount; i++ ){
        round[i] = new roundItem(i,Math.random() * WIDTH,Math.random() * HEIGHT);
        round[i].draw();
    }
    animate()
}

Чтобы заставить точки двигаться, напишем следующую функцию.

// 移动圆点
roundItem.prototype.move = function () {
    // y方向移动速度与圆点半径成正比
    this.y -= this.r / 20

    // x方向移动分两个方向，移动速度与圆点半径成正比
    if (this.index % 2 == 0) {
        this.x -= 0.08
    } else {
        this.x += this.r / 40
    }

    // 如果超出范围就把它拉回来
    if (this.y <= 0) {
        this.y += HEIGHT
    }
    if (this.x <= 0) {
        this.x += WIDTH
    }
    if (this.x >= WIDTH) {
        this.x -= WIDTH
    }

    this.draw()
}

// 定义动画
function animate() {
    context.clearRect(0, 0, WIDTH, HEIGHT);
    for (var i in round) {
        round[i].move()
    }
    requestAnimationFrame(animate)
}

В это время вы можете увидеть динамические маленькие точки.

Разве это не круто? Я сделаю это более круто, когда у меня будет время.

Категории