您正在使用 IPV4 [35.172.193.238] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
canvas版人体时钟的实现示例
内容摘要: !doctype htmlhtml lang='zh-CN'headmeta charset='UTF-8'meta http-equiv='X-UA-Compatible' content='ie=edge'titleHoneHoneClock/titlestyle* {padding: 0;margin: 0;}html, body {width: 10......
<!doctype html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>HoneHoneClock</title>

<style>

* {

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;

}

</style>

</head>

<body>

<canvas class="canvas"></canvas>

<script src="pixi_5.3.4.min.js"></script>

<script src="Stats.min.js"></script>

<script>


(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

})


// 人体时钟

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: '1',

count: 9,

frameFrom: -1,

frameTo: -1,

},

{

prefix: '2',

count: 7,

frameFrom: -1,

frameTo: -1,

},

{

prefix: '3',

count: 6,

frameFrom: -1,

frameTo: -1,

},

{

prefix: '4',

count: 9,

frameFrom: -1,

frameTo: -1,

},

{

prefix: '5',

count: 14,

frameFrom: -1,

frameTo: -1,

},

{

prefix: '6',

count: 7,

frameFrom: -1,

frameTo: -1,

},

{

prefix: '7',

count: 10,

frameFrom: -1,

frameTo: -1,

},

{

prefix: '8',

count: 7,

frameFrom: -1,

frameTo: -1,

},

{

prefix: '9',

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 <= data.count; j++) {

k++

frames.push(textures[`${data.prefix}(${j}).png`])

}

data.frameTo = k - 1

}

this.frames = frames

this.aniData = aniData

}

const ani = new PIXI.AnimatedSprite(frames)

ani.anchor.set(0.5, 1)

ani.animationSpeed = 0.4


this.stopAt = -1

ani.onFrameChange = () => {

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, (pageHeight + 150) * 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(250, 0)

clockMin2.position.set(350, 0)

clockSec1.position.set(500, 0)

clockSec2.position.set(600, 0)

clockWrap.addChild(clockHour1)

clockWrap.addChild(clockHour2)

clockWrap.addChild(clockMin1)

clockWrap.addChild(clockMin2)

clockWrap.addChild(clockSec1)

clockWrap.addChild(clockSec2)

stage.addChild(clockWrap)


// 开始动画循环

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

})()

</script>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:字体大中小代码&字号缩放代码

 

下一篇:css3实现书本翻页效果的示例代码

发布日期:2021/6/15
手机扫二维码直达本页
发布时间:12:34:56
点  击:7
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....