ล่าสุดการพัฒนาเว็บบทเรียน
 

Canvas Clock

❮ก่อนหน้า ถัดไปบท❯

ในบทนี้เราจะสร้างนาฬิกาอะนาล็อกโดยใช้ผ้าใบ HTML

Part I - สร้างผ้าใบ

นาฬิกาต้องการภาชนะเว็บ HTML สร้างผ้าใบ HTML 300 x 300 พิกเซล:

โค้ด 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>

สร้างวัตถุผ้าใบ (var ผ้าใบ) จากองค์ประกอบผ้าใบ HTML นี้:

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

สร้างวัตถุวาด 2D (var 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();
}

❮ก่อนหน้า ถัดไปบท❯