How to use canvas to realize the effect of human clock

In this article, the editor introduces in detail "how to use canvas to achieve human clock effect". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use canvas to achieve human clock effect" can help you solve your doubts.

The core API is PIXI.AnimatedSprite.

The code is also very short, so I put it directly below.

HoneHoneClock * {padding: 0; margin: 0;} html, body {width: 100%; height: 100%;} body {background-color: lightcyan;} canvas {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1 } (async function () {const stats = new Stats () document.body.appendChild (stats.domElement) let pageWidth = 0 let pageHeight = 0 let clockHour1, clockHour2 let clockMin1, clockMin2 let clockSec1, clockSec2 const $canvas = document.querySelector ('canvas') const renderer = new PIXI.Renderer ({view: $canvas, width: pageWidth, height: pageHeight, transparent: true, autoDensity: true Antialias: true}) / / Human clock class Clock extends PIXI.Container {constructor (name) {super () const textures = loader.resources [honeHoneClockJson] .textures let frames = [] let aniData = [] if (this.frames) {frames = this.frames aniData = this.aniData} else { AniData = [{prefix:'0' Count: 6, frameFrom:-1, frameTo:-1,}, {prefix: '1percent, count: 9, frameFrom:-1, frameTo:-1,}, {prefix:' 2' Count: 7, frameFrom:-1, frameTo:-1,}, {prefix: '3percent, count: 6, frameFrom:-1, frameTo:-1,}, {prefix:' 4' Count: 9, frameFrom:-1, frameTo:-1,}, {prefix: '5percent, count: 14, frameFrom:-1, frameTo:-1,}, {prefix:' 6' Count: 7, frameFrom:-1, frameTo:-1,}, {prefix: '74th, count: 10, frameFrom:-1, frameTo:-1,}, {prefix:' 8' Count: 7, frameFrom:-1, frameTo:-1,}, {prefix: '94th, count: 9, frameFrom:-1, frameTo:-1,} ] let k = 0 for (let I = 0 I

< aniData.length; i++) { const data = aniData[i] data.frameFrom = k for (let j = 1; j { if (ani.currentFrame === this.stopAt) { ani.stop() } } this.addChild(ani) this.name = name this.ani = ani this.num = -1 } set number (number) { if (this.num !== number) { this.num = number this.stopAt = this.aniData[number].frameTo this.ani.gotoAndPlay(this.aniData[number].frameFrom) } } } const stage = new PIXI.Container() stage.name = 'stage' let clockWrap const ticker = new PIXI.Ticker() let now = new Date() let lastTime = now.getTime() const loop = function () { stats.begin() now = new Date() if (now.getTime() - lastTime >

= 1000) {let hours = now.getHours () if (hours > 9) {clockHour1.number = Math.floor (hours / 10) clockHour2.number = hours% 10} else {clockHour1.number = 0 clockHour2.number = hours} let minutes = now.getMinutes () if (minutes > 9) { ClockMin1.number = Math.floor (minutes / 10) clockMin2.number = minutes% 10} else {clockMin1.number = 0 clockMin2.number = minutes} let seconds = now.getSeconds () if (seconds > 9) {clockSec1.number = Math.floor (seconds / 10) clockSec2.number = seconds% 10} Else {clockSec1.number = 0 clockSec2.number = seconds} lastTime = now.getTime ()} renderer.render (stage) stats.end ()} ticker.add (loop) const honeHoneClockJson = 'HoneHoneClock.json' const loader = new PIXI.Loader () loader.add ([honeHoneClockJson]) loader.onComplete.add (async (res) = > { ClockWrap = new PIXI.Container () clockWrap.position.set ((pageWidth-630) * 0.5 ClockHour1 = new Clock ('hour') clockHour2 = new Clock (' hour') clockMin1 = new Clock ('min') clockMin2 = new Clock (' min') clockSec1 = new Clock ('sec') clockSec2 = new Clock (' sec') clockHour1.position.set (0,0) clockHour2.position.set (100,0) clockMin1.position.set 0) clockMin2.position.set (350,0) clockSec1.position.set (500,0) clockSec2.position.set 0) clockWrap.addChild (clockHour1) clockWrap.addChild (clockHour2) clockWrap.addChild (clockMin1) clockWrap.addChild (clockMin2) clockWrap.addChild (clockSec1) clockWrap.addChild (clockSec2) stage.addChild (clockWrap) / start animation cycle ticker.start () loader.load () const onResize = (e) = > {pageWidth = document.body.clientWidth pageHeight = Document.body.clientHeight if (clockWrap) {clockWrap.position.set ((pageWidth-630) * 0.5) (pageHeight + 150) * 0.5)} renderer.resize (pageWidth, pageHeight)} onResize () _ window.onresize = onResize}) () read here This article "how to use canvas to achieve human clock effect" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the article, please follow the industry information channel.