Часы Canvas

В следующих главах мы будем использовать HTML холст для создания имитации часов.

Часть 1 - Создание холста

Часы需要一个 HTML контейнер. Создайте HTML холст:

Код HTML:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}
</script>
</body>
</html>

Попробуйте сами

Комментарий к коду

Добавить элемент HTML <canvas> на вашу страницу:

<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

Создать объект холста (const canvas):

const canvas = document.getElementById("canvas");

Создать 2d объект рисования для объекта холста (const ctx):

const ctx = canvas.getContext("2d");

Используйте высоту холста для расчета радиуса часов:

let radius = canvas.height / 2;

Подсказка

Используйте высоту холста для расчета радиуса часов, чтобы часы подходили ко всем размерам холста.

Переместить (координаты начального положения объекта рисования) (0,0) в центр холста:

ctx.translate(radius, radius);

Уменьшить радиус часов (до 90%), чтобы часы могли быть нарисованы на холсте:

radius = radius * 0.90;

Создать функцию для рисования часов:

function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}

См. также:

Полное руководство по Canvas на CodeW3C.com