Canvas klocka
- Föregående sida Canvas bild
- Nästa sida Klockasida
I de kommande kapitlen kommer vi att bygga en simulering av en klocka med hjälp av HTML-canvas.
Del 1 - Skapa canvas
Klockan behöver en HTML-container. Skapa en HTML-canvas:
HTML-kod:
<!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>
Kodförklaring
Lägg till HTML <canvas> elementet till din sida:
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
Skapa ett canvas-objekt (const canvas):
const canvas = document.getElementById("canvas");
Skapa ett 2d-ritobjekt för canvas-objektet (const ctx):
const ctx = canvas.getContext("2d");
Använd canvas:ets höjd för att beräkna klockans radie:
let radius = canvas.height / 2;
Tips
Använd canvas:ets höjd för att beräkna klockans radie, så att klockan passar alla canvas-storlekar.
Återför (ritande objektets) (0,0) position till mitten av canvas:et:
ctx.translate(radius, radius);
Minska klockans radie (till 90%) och rita klockan inom canvas:et:
radius = radius * 0.90;
Skapa en funktion för att ritade klockan:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
{}
Se också:
- Föregående sida Canvas bild
- Nästa sida Klockasida
