ความคิดเห็น: บทความนี้เขียนแอปพลิเคชั่นนาฬิกา HTML5 เพื่อพยายามตั้งค่าการแปลและการหมุนของการเปลี่ยนแปลงของการแปลงพิกัดรวมถึงการวาดเส้นทางของผืนผ้าใบ HTML5, เริ่มต้น, closepath, rec, arc ฯลฯ และคุณสามารถอัปโหลดรหัสโดยตรงและอ้างอิงได้
ในบทความก่อนหน้านี้เราเรียนรู้เกี่ยวกับผ้าใบของ HTML5 ไม่จำเป็นต้องพูดเราสามารถลองเขียนแอปพลิเคชันนาฬิกา HTML5 ที่นี่เราตั้งค่าการแปลและการหมุนของการเปลี่ยนแปลงของการเปลี่ยนแปลงพิกัดเช่นเดียวกับการวาดเส้นทางของผืนผ้าใบ HTML5, เริ่มต้น, closepath, rec, arc, ฯลฯ และกลไกการออมและการกู้คืนสถานะการวาดภาพที่สำคัญของ HTML5 Canvas Path Drawing, Save, Restoreฉันจะไม่พูดมากแค่อัปโหลดรหัส หากคุณมีคำถามใด ๆ โปรดถามคำถามและให้คำแนะนำ
การเรนเดอร์ด้านล่าง:
รหัส:
<html>
<head>
</head>
<body>
<Canvas> เบราว์เซอร์ของคุณไม่รองรับ </anvas>
<script type = "text/javascript">
var c = document.getElementById ("Mycanvas");
var cxt = c.getContext ("2d");
var slen = 60;
var mlen = 50;
var hlen = 40;
CXT.Strokerect (0, 0, C.Width, C.Height);
cxt.beginpath ();
cxt.strokestyle = "#00f";
cxt.fillstyle = "#00f";
cxt.arc (200, 150, 5, 0, 2 * math.pi, true);
cxt.fill ();
cxt.closepath ();
cxt.beginpath ();
cxt.strokestyle = "#00f";
cxt.arc (200, 150, 100, 0, 2 * math.pi, true);
cxt.stroke ();
cxt.closepath ();
cxt.beginpath ();
CXT.Translate (200, 150); // ปลูกต้นกำเนิด;
cxt.rotate (-math.pi / 2);
cxt.save ();
สำหรับ (var i = 0; i <60; i ++) {
ถ้า (i % 5 == 0) {
// cxt.fillstyle = "#ff0000";
cxt.fillrect (80, 0, 20, 5);
cxt.filltext ("" + (i / 5 == 0? 12: i / 5), 70, 0);
} อื่น {
// cxt.strokestyle = "#00f";
cxt.fillrect (90, 0, 10, 2);
-
//document.getElementByid("div1").innerText + = "" + i;
cxt.rotate (math.pi / 30);
-
cxt.closepath ();
var ls = 0, lm = 0, lh = 0;
ฟังก์ชั่นรีเฟรช () {
cxt.restore ();
cxt.save ();
cxt.rotate (ls * math.pi / 30);
cxt.clearrect (5, -1, slen+1, 2+2);
cxt.restore (); cxt.save ();
cxt.rotate (lm * math.pi / 30);
cxt.clearrect (5, -1, mlen+1, 3+2);
cxt.restore (); cxt.save ();
cxt.rotate (lh * math.pi / 6);
cxt.clearrect (5, -3, hlen+1, 4+2);
เวลา var = วันที่ใหม่ ();
var s = ls = time.getSeconds ();
var m = lm = time.getMinutes ();
var h = lh = time.getHours ();
cxt.restore ();
cxt.save ();
cxt.rotate (s * math.pi / 30);
cxt.fillrect (5, 0, slen, 2);
cxt.restore (); cxt.save ();
cxt.rotate (m * math.pi / 30);
cxt.fillrect (5, 0, mlen, 3);
cxt.restore (); cxt.save ();
cxt.rotate (h * math.pi / 6);
cxt.fillrect (5, -2, hlen, 4);
-
var myInterval = setInterval ("refresh ();", 1000);
</script>
<div> </div>
</body>
</html>