กราฟิก HTML

กราฟิก หน้าแรก

Google Maps

แนะนำแผนที่ แผนที่พื้นฐาน การวางซ้อนแผนที่ กิจกรรมของแผนที่ การควบคุมแผนที่ ประเภทแผนที่ แผนที่อ้างอิง

กวดวิชา SVG

บทนำ SVG SVG ใน HTML SVG สี่เหลี่ยมผืนผ้า SVG Circle SVG วงรี สาย SVG รูปหลายเหลี่ยม SVG SVG Polyline เส้นทาง SVG ข้อความ SVG SVG ลากเส้น บทนำตัวกรอง SVG เอฟเฟกต์เบลอ SVG SVG Drop Shadows SVG ลิเนียร์ SVG Radial ตัวอย่าง SVG ข้อมูลอ้างอิง SVG

กวดวิชาผ้าใบ

แนะนำผ้าใบ ภาพวาดบนผืนผ้าใบ พิกัดผ้าใบ ผ้าใบไล่โทนสี ข้อความผ้าใบ ภาพแคนวาส อ้างอิงผ้าใบ

นาฬิกาผ้าใบ

แนะนำนาฬิกา หน้าปัดนาฬิกา ตัวเลขนาฬิกา เข็มนาฬิกา นาฬิกาเริ่ม

เกม HTML

แนะนำเกม เกมแคนวาส ส่วนประกอบของเกม ตัวควบคุมเกม อุปสรรคของเกม คะแนนเกม รูปภาพเกม เสียงเกม เกมแรงโน้มถ่วง เกมเด้ง การหมุนเกม การเคลื่อนไหวของเกม

นาฬิกาผ้าใบ เริ่ม


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


ตอนที่ V - เริ่มนาฬิกา

ในการเริ่มนาฬิกา ให้เรียกใช้ฟังก์ชัน drawClock ตามช่วงเวลา:

จาวาสคริปต์:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//drawClock();
setInterval(drawClock, 1000);

ตัวอย่างที่อธิบาย

สิ่งเดียวที่คุณต้องทำ (เพื่อเริ่มนาฬิกา) คือการเรียกใช้ฟังก์ชัน drawClock เป็นระยะๆ

ทดแทน:

drawClock();

กับ:

setInterval(drawClock, 1000);

ช่วงเวลาเป็นมิลลิวินาที drawClock จะถูกเรียกทุกๆ 1,000 มิลลิวินาที