Canvas Годинник
У цих розділах ми створимо аналоговий годинник за допомогою HTML Canvas.
Частина I - Створити Canvas
Для годинника потрібен контейнер HTML. Створіть HTML полотно:
HTML код:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var 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>
Створіть об’єкт canvas (var canvas) з елемента HTML canvas:
var canvas = document.getElementById("canvas");
Створіть об’єкт двовимірного малювання (var ctx) для об’єкта canvas:
var ctx = canvas.getContext("2d");
Обчисліть радіус годинника, використовуючи висоту полотна:
var 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();
}
