Давайте сначала посмотрим на эффект часов частиц следующим образом:
Ниже мы реализуем это через холст и js,
Сначала создайте html-файл и добавьте холст следующим образом:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> .container{ поля: 0, auto; ширина: 600 пикселей } </style; >/head><body> <div id=container> <canvas id=canvas></canvas> </div></body>Затем импортируйте материал digit.js. Материал состоит из чисел с использованием двумерных массивов. Всего имеется десять символов: 0–9 и двоеточие, а именно:
Вы можете видеть, что символы цифры 1 состоят из
Приступим к созданию холста:
функция Clock() { var Canvas = document.getElementById(canvas); Canvas.width = 600; this.cxt = Canvas.getContext('2d'); this.cxt.fillStyle=#ddd; .cxt.fillRect(0, 0, 500, 100 });Приведенный выше код может нарисовать небольшой серый холст в браузере.
Начнем анализ ниже:
1. Понять матрицу данных? Это многомерный массив
2. Как нарисовать круг?
2.1 Нужно ли сначала знать радиус?
Как видно из рисунка выше, положения центра круга следующие:
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2. . . г+1 + (г+1)*2*я
При этом радиус также можно получить, вычислив высоту круга следующим образом:
Высота круга равна (r+1)*2, а высота холста состоит из 10 кругов.
CanvasHeight = (r+1)*2*10
Если высота холста установлена на 100, то появится r, также появится центр круга xy, и круг начнет рисоваться.
Сначала добавьте оператор к объекту Clock выше, чтобы вычислить r.
this.r = 100/20-1;
Затем я добавляю метод рисования в прототип Clock.
Clock.prototype.draw = function(num, index) { this.cxt.fillStyle=#000; for (let i=0; i<digit[num].length; i++) { for (let j=0; j< digit[num][i].length; j++) { if (digit[num][i][j] == 1) { this.cxt.beginPath(); this.cxt.arc(index*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false); this.cxt.closePath(); this.cxt.fill();draw получает 2 параметра: первый — индекс символа, второй — последовательность смещения символов, 70 — расстояние смещения, которое можно настроить.
Первый for получает массив символов для рендеринга. Второй for принимает каждую строку для рендеринга и отображает ее только как 1. Параметры для рисования круга — это в основном x, y, r.
Далее нам нужно получить время. Мы можем напрямую получить время из новой даты, используя обычные правила, следующим образом:
Clock.prototype.getTime = function() { var reg = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); var data = []; data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]); я = 0; я <data.length; я ++) { this.draw (данные [i], я });Вы можете легко получить часы, минуты и секунды с помощью регулярных выражений. При отправке массива обратите внимание на соответствующий формат: 10 представляет собой 10-й символ в digit.js, который является двоеточием.
Обратите внимание, что с такой покраской возникнет проблема, то есть холст невозможно будет обновить. Вы можете это добавить.
холст.высота= 100
Теперь вы можете запустить код следующим образом:
var clock = new Clock();setInterval(()=>{ clock.getTime(); })Хорошо, это нормально
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.