นาฬิกา Canvas

ในบทที่จะมาต่อไปนี้ เราจะใช้ช่องภาพ HTML เพื่อสร้างนาฬิกาแบบสมมติ:

ส่วนที่ 1 - สร้างช่องภาพ

นาฬิกาจำเป็นต้องมีตัวแทน HTML ของมัน. สร้างตัวแทนช่องภาพ HTML:

รหัส HTML:

<!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>

ทดลองด้วยตัวเอง

การอธิบายรหัส

เพิ่มองค์ประกอบ <canvas> HTML ไปยังหน้าเว็บของคุณ:

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

สร้างวัตถุช่องภาพ (const canvas):

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

สร้างวัตถุวาดภาพ 2d สำหรับวัตถุช่องภาพ (const ctx):

const ctx = canvas.getContext("2d");

ใช้ความสูงของช่องภาพเพื่อคำนวณรัศมีของนาฬิกา:

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

ดูเพิ่มเติม:

คู่มืออ้างอิง Canvas ทั้งหมดของ CodeW3C.com