În aceste capitole vom construi un ceas analogic folosind HTML panza.
Partea I - Crearea Canvas
Ceasul are nevoie de un container HTML. Creați o pânză HTML 300 x 300 pixeli:
Codul HTML:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300"
height="300" 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>
Încearcă - l singur » Codul pe înțelesul tuturor
Adăugați un HTML <canvas> element pagina ta:
<canvas id="canvas" width="300"
height="300" style="background-color:#333"></canvas>
Crearea unui obiect panza (var canvas) din elementul panza HTML:
var canvas =
document.getElementById("canvas");Crearea unui obiect de desen 2d (var ctx) pentru obiectul panza:
var ctx = canvas.getContext("2d");Se calculează raza de ceas, folosind înălțimea pânzei:
var radius
= canvas.height / 2;Folosind înălțimea panza pentru a calcula raza de ceas, face ca ceasul să funcționeze pentru toate dimensiunile de panza.
Remaparea (0,0) poziția (of the drawing object) la centrul de panza:
ctx.translate(radius, radius);Reduceți raza de ceas (to 90%) pentru a desena ceasul bine în interiorul panza:
radius = radius * 0.90;Creați o funcție pentru a desena ceasul:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}