أحدث البرامج التعليمية وتطوير الشبكة
 

Canvas Clock

❮ السابق التالي الفصل ❯

في هذه الفصول سوف نبني على مدار الساعة التناظرية باستخدام قماش HTML.

الجزء الأول - إنشاء قماش

على مدار الساعة تحتاج حاوية HTML. إنشاء 300 × 300 بكسل HTML قماش:

كود 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>
انها محاولة لنفسك »

وأوضح كود

إضافة HTML <قماش> العنصر إلى صفحتك:

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

إنشاء كائن قماش (فار قماش) من العنصر قماش HTML:

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

إنشاء كائن الرسم 2D (فار CTX) للكائن قماش:

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();
}

❮ السابق التالي الفصل ❯