ฉันได้เรียนรู้องค์ประกอบผ้าใบใน HTML5 มาก่อนและเพื่อฝึกฝนมือของฉันฉันรู้นาฬิกาง่าย ๆ นาฬิกาเองไม่ซับซ้อนและไม่ได้สวยงามโดยใช้รูปภาพ อย่างไรก็ตามแม้ว่านกกระจอกจะเล็ก แต่ฉันจะแบ่งปันกับคุณด้านล่าง:
ผลการสาธิต:
รหัส HTML:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> นาฬิกา </title>
<style type = "text/css">
-
มาร์จิ้น: 0;
Padding: 0;
-
.ผ้าใบ{
ขอบซ้าย: 20px;
ระยะขอบด้านบน: 20px;
ชายแดน: ของแข็ง 1px;
-
</style>
</head>
<body onload = "main ()">
<canvas class = "canvas" id = "canvasid" width = '500px' ความสูง = '400px'> </canvas>
<script type = "text/javascript" src = "clock.js"> </script>
</body>
</html>
รหัส JS:
การคัดลอกรหัสมีดังนี้:
var canvas = {};
canvas.cxt = document.getElementById ('canvasid'). getContext ('2d');
canvas.point = function (x, y) {
this.x = x;
this.y = y;
-
/* ลบกราฟิกทั้งหมดบนผืนผ้าใบ*/
canvas.clearcxt = function () {
var me = this;
var canvas = me.cxt.canvas;
me.cxt.clearrect (0,0, canvas.offsetWidth, canvas.offsetheight);
-
/*นาฬิกา*/
canvas.clock = function () {
var me = canvas,
c = me.cxt,
Radius = 150, /*Radius* /
สเกล = 20, /*ความยาวมาตราส่วน* /
minangle = (1/30)*math.pi,/*ray ของหนึ่งนาที*/
Hourangle = (1/6)*math.pi,/*ray ของหนึ่งชั่วโมง*/
hourhandlength = radius/2,/*ความยาวมือชั่วโมง*//
minhandlength = radius/3*2,/*ความยาวมือนาที*//
SecHandLength = RADIUS/10*9,/*ความยาวมือสอง*//
center = new me.point (c.canvas.width/2, c.canvas.height/2); /*ศูนย์กลางของวงกลม*/
/*วาดกึ่งกลางของวงกลม (กึ่งกลางของหน้าปัด)*/
ฟังก์ชั่น drawcenter () {
C.Save ();
c.translate (center.x, center.y);
C.FillStyle = 'Black';
C.BEGINPATH ();
c.arc (0, 0, รัศมี/20, 0, 2*math.pi);
C.closepath ();
C.fill ();
C.TROKE ();
C.Restore ();
-
/*วาดหน้านาฬิกาผ่านการแปลงพิกัด*/
ฟังก์ชั่น Drawbackground () {
C.Save ();
c.translate (center.x, center.y); /*การแปลงการแปล*/
/*วาดมาตราส่วน*/
ฟังก์ชั่น drawscale () {
C.Moveto (รัศมี - สเกล, 0);
c.lineto (รัศมี, 0);
-
C.BEGINPATH ();
c.arc (0, 0, รัศมี, 0, 2*math.pi, true);
C.closepath ();
สำหรับ (var i = 1; i <= 12; i ++) {
drawscale ();
C.Rotate (ชั่วโมงชั่วโมง); /*การแปลงการหมุน*/
-
/*เวลาการวาด (3,6,9,12)*/
c.font = "bold 30px impack"
C.FillText ("3", 110, 10);
C.FillText ("6", -7, 120);
C.FillText ("9", -120, 10);
C.FillText ("12", -16, -100);
C.TROKE ();
C.Restore ();
-
/*วาดมือชั่วโมง (H: เวลาปัจจุบัน (ระบบ 24 ชั่วโมง)*//
this.drawhourhand = function (h) {
h = h === 0? 24: H;
C.Save ();
c.translate (center.x, center.y);
C.rotate (3/2*Math.pi);
C.Rotate (H*HOMANGLE);
C.BEGINPATH ();
C.Moveto (0, 0);
c.lineto (hourhandlength, 0);
C.TROKE ();
C.Restore ();
-
/*วาดมือนาที (M: นาทีปัจจุบัน)*/
this.drawminhand = function (m) {
m = m === 0? 60: M;
C.Save ();
c.translate (center.x, center.y);
C.rotate (3/2*Math.pi);
C.Rotate (M*minangle);
C.BEGINPATH ();
C.Moveto (0, 0);
c.lineto (minhandlength, 0);
C.TROKE ();
C.Restore ();
-
/*วาดมือสอง (s: วินาทีปัจจุบัน)*/
this.drawsechand = ฟังก์ชั่น {
s = s === 0? 60: S;
C.Save ();
c.translate (center.x, center.y);
C.rotate (3/2*Math.pi);
C.rotate (S*Minangle);
C.BEGINPATH ();
C.Moveto (0, 0);
c.lineto (sechandlength, 0);
C.TROKE ();
C.Restore ();
-
/*วาดนาฬิกาตามเวลาท้องถิ่น*/
this.drawClock = function () {
var me = this;
ฟังก์ชั่นวาด () {
วันที่ var = วันที่ใหม่ ();
canvas.clearcxt ();
Diskingground ();
drawcenter ();
me.drawhourhand (date.getHours () + date.getMinutes ()/60);
me.drawminhand (date.getMinutes () + date.getSeconds ()/60);
me.drawsechand (date.getSeconds ());
-
วาด();
setInterval (วาด, 1,000);
-
-
var main = function () {
var clock = new canvas.clock ();
นาฬิกา DRAWCLOCK ();
-
APIs Canvas Element Simple บางส่วนมีส่วนร่วมในรหัส แค่พัก
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ผ้าใบ