Now that it’s 2020, ECMAScript has come out in 2019. With The Times, of course
Function writing tutorial
Class encapsulation class encapsulation class
1. The ES6 syntax
2. Knowledge of canvas
The effect
code
codepen
<! Doctype HTML > < HTML > <head> <meta charset=" utF-8 "> </title> </head> <body style="background-color: #A8D8EC; > <div id="canvas-warp" style="display: block; margin: 200px auto;" > <canvas id="canvas" width="200" height="200" style="margin: 0 auto; display: block; background-color: #fff; border-radius: </canvas> </div> </body> <script> class CanvasClock{constructor(cav,x,y,size){ this.cav = cav; this.x = x; this.y = y; this.size = size; } drawBackground (){ var r = 100*this.size; var ctx = this.cav.getContext('2d'); CTX. ClearRect (0, 0, this. Cav. Height, enclosing cav. Width); / / remove the contents of the canvas, don't worry about performance issues, canvas animation is done with the method of directly remove the canvas again var Numbers =,4,5,6,7,8,9,10,11,12,1,2 [3]. / / CTX. ClearRect (0, 0, r * this. X, r * this. Y); ctx.save(); ctx.beginPath(); ctx.translate(this.x,this.y); ctx.lineWidth=this.size*10; CTX. Arc (0, 0, r - 5,0,2 * Math. PI); ctx.stroke(); ctx.font = '18px Arial'; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; numbers.forEach(function(item,i){ let rad = 2*Math.PI / 12 *i; let x =Math.cos(rad) * (r-30); let y =Math.sin(rad) * (r-30); ctx.fillText(item,x,y); }); for(let i=0; i<60; i++){ let rad = 2* Math.PI /60 *i; let x =Math.cos(rad) * (r-18); let y =Math.sin(rad) * (r-18); ctx.beginPath(); if(i%5==0){ ctx.fillStyle ='#000'; CTX. Arc (x, y, 2,0,2 * Math. PI, false); }else{ ctx.fillStyle ='#333'; CTX. Arc (x, y, 1,0,2 * Math. PI, false); } ctx.fill(); } ctx.restore(); } drawDot(){ var r = 100*this.size; var ctx = this.cav.getContext('2d'); ctx.save(); ctx.beginPath(); ctx.fillStyle = '#fff'; CTX. Arc (0,0,3 * this. The size, 0, 2 * Math in PI, false) CTX. The fill (); ctx.restore(); } drawHour(hour,min){ var r = 100*this.size; var ctx = this.cav.getContext('2d'); ctx.save(); ctx.beginPath(); ctx.translate(this.x,this.y); let rad = 2*Math.PI / 12 *hour; let minrad = 1/6*Math.PI /60 *min; ctx.rotate(rad+minrad); ctx.lineWidth = 6; ctx.lineCap = 'round'; CTX. MoveTo (0, 10); ctx.lineTo(0,-r/2+2); ctx.stroke(); ctx.restore(); } drawMin(min){ var r = 100*this.size; var ctx = this.cav.getContext('2d'); ctx.save(); ctx.beginPath(); ctx.translate(this.x,this.y); let rad = 2*Math.PI / 60 *min; ctx.rotate(rad); ctx.lineWidth = 4; CTX. MoveTo (0, 13); ctx.lineTo(0,-r/2-15); ctx.stroke(); ctx.restore(); } drawSec(sec){ var r = 100*this.size; var ctx = this.cav.getContext('2d'); ctx.save(); ctx.beginPath(); ctx.translate(this.x,this.y); ctx.strokeStyle ="#F4606C" let rad = 2*Math.PI / 60 *sec; ctx.rotate(rad); ctx.lineWidth = 4; CTX. MoveTo (0, 13); ctx.lineTo(0,-r/2-35); ctx.stroke(); ctx.restore(); } draw(){ this.timer = setInterval( () => { var date = new Date(); var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); this.drawBackground(); this.drawHour(hour,min); this.drawMin(min); this.drawSec(sec); this.drawDot(); }} var clockOne = new CanvasClock(document.getelementbyid ("canvas"),100,100,1); clockOne.draw(); </script> </html>Copy the code