Bu bölümlerde HTML tuval kullanarak bir analog saat inşa edecek.
Bölüm I - Tuval oluştur
Saat bir HTML konteyneri ihtiyacı var. Bir 300 x 300 piksel HTML tuval oluşturun:
HTML kodu:
<!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>
Kendin dene " Kod Açıklaması
Bir HTML Ekle <canvas> sayfanıza eleman:
<canvas id="canvas" width="300"
height="300" style="background-color:#333"></canvas>
Bir tuval nesnesi oluşturun (var canvas) HTML tuval öğeden:
var canvas =
document.getElementById("canvas");2d çekme nesne oluşturma (var ctx) tuval nesnesi için:
var ctx = canvas.getContext("2d");tuval yüksekliğini kullanarak, saat yarıçapı hesaplayın:
var radius
= canvas.height / 2;Saat yarıçapını hesaplamak için tuval yüksekliği kullanarak, tüm tuval boyutları için saat çalışma yapar.
Remap (0,0) pozisyonunu (of the drawing object) tuval merkezine:
ctx.translate(radius, radius);Saat yarıçapını azaltın (to 90%) tuval içine iyice saati çizmek için:
radius = radius * 0.90;Saati çizmek için bir işlev oluşturun:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}