vue.js实现抖音很火八卦时间数字罗盘屏保壁纸
代码如下.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>Clock</title><script type="text/javascript" src="/vue/2.6.9/vue.min.js"></script><style>html,body {height: 100%;margin: 0;padding: 0;background: #000;}#clock {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}/* .content {width: 700px;height: 700px;} */canvas {background-color: #000;width: 100%;height: 100%;}</style></head><body><div id="clock"><div id="content"><canvas ref="cav" width="1400" height="1400"></canvas></div></div><script>//https://cubic-/#.17,.67,.83,.67function TransitionTrigger(duration, p1, p2, handler) {let timestamp = 0;let p0 = {x: 0, y: 0};let p3 = {x: 1, y: 1};function loop(frame) {if (timestamp === 0) {timestamp = frame;}let diff = frame - timestamp;let b = bezier(diff / duration);handler && handler(b.y);if (diff <= duration) {window.requestAnimationFrame(loop);return;}handler && handler(1);}function bezier(t) {let x = p0.x * Math.pow((1 - t), 3) + 3 * p1.x * t * Math.pow((1 - t), 2);x += 3 * p2.x * t * t * (1 - t);x += p3.x * t * t * t;let y = p0.y * Math.pow((1 - t), 3) + 3 * p1.y * t * Math.pow((1 - t), 2);y += 3 * p2.y * t * t * (1 - t);y += p3.y * t * t * t;return {x, y};}this.start = function () {window.requestAnimationFrame(loop);};}new Vue({el: '#clock',name: 'clock',data() {return {dom: null,ctx: null,date: null,center: [400, 400],months: [],days: [],weeks: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],hours: [],minutes: [],seconds: [],radiusStep: 100,wordsMapping: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],center: {x: 0, y: 0},now: new Date(),width: 1400,height: 1400,//0,1.64,1,.89p1: {x: 0.1, y: 1.58},p2: {x: 0.17, y: 0.92},font: '20px PingFang',frontColor: '#fff',backColor: '#666'};},mounted() {//this.fullsScreen();this.dom = this.$refs.cav;let bodyWidth = document.getElementsByTagName("body")[0].offsetWidth;let bodyHeight = document.getElementsByTagName("body")[0].offsetHeight;if(bodyWidth> bodyHeight) {document.getElementById("content").style.width = bodyHeight * 0.95 + "px";document.getElementById("content").style.height = bodyHeight * 0.95 + "px";//console.log("1 "+bodyHeight)}else if(bodyWidth< bodyHeight){document.getElementById("content").style.width = bodyWidth * 0.95 + "px";document.getElementById("content").style.height = bodyWidth * 0.95 + "px";//console.log("2 "+bodyWidth)}else{document.getElementById("content").style.width = bodyWidth + "px";document.getElementById("content").style.height = bodyWidth + "px";//console.log("3 "+bodyWidth)}this.ctx = this.dom.getContext('2d');for (let i = 1; i <= 12; i++) {this.months.push(this.numberToText(i) + '月');}for (let i = 1; i <= 31; i++) {this.days.push(this.numberToText(i));}for (let i = 0; i <= 23; i++) {this.hours.push(this.numberToText(i));}for (let i = 0; i <= 59; i++) {this.minutes.push(this.numberToText(i));}for (let i = 0; i <= 59; i++) {this.seconds.push(this.numberToText(i));}this.center = {x: 700, y: 700};this.ctx.font = '20px PingFang';this.ctx.fillStyle = '#666';this.launch();},methods: {launch() {// window.requestAnimationFrame(this.draw);this.draw();setInterval(this.draw, 1000);},draw() {this.now = new Date();new TransitionTrigger(1000, this.p1, this.p2, (percent) => {this.ctx.clearRect(0, 0, this.width, this.height);this.drawDial(percent);this.drawTimeUnit();}).start();},poke(angle, handler) {this.ctx.translate(this.center.x, this.center.y);this.ctx.rotate(angle / 180 * Math.PI);this.ctx.translate(this.center.x * -1, this.center.y * -1);handler();this.ctx.translate(this.center.x, this.center.y);this.ctx.rotate(angle / 180 * Math.PI * -1);this.ctx.translate(this.center.x * -1, this.center.y * -1);},drawDial(percent) {let radius = 100;const month = this.now.getMonth();this.poke(360 / 12 * month, () => {this.months.forEach((v, idx) => {const radian = (360 / 12 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (idx === month) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});radius += 120;const day = this.now.getDate() - 1;this.poke(360 / 31 * day, () => {this.days.forEach((v, idx) => {const radian = (360 / 31 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (idx === day) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});radius += 120;const hour = this.now.getHours();this.poke(360 / 24 * hour, () => {this.hours.forEach((v, idx) => {const radian = (360 / 24 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (idx === hour) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});radius += 120;const minute = this.now.getMinutes();this.poke(360 / 60 * minute, () => {this.minutes.forEach((v, idx) => {const radian = (360 / 60 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (idx === minute) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});radius += 120;const second = this.now.getSeconds();const k = 360 / 60;this.poke(k * (second - 1) + k * percent, () => {this.seconds.forEach((v, idx) => {const radian = (360 / 60 * idx) / 180 * Math.PI;const point = this.pointInCircle(radius, radian);this.ctx.translate(point.x, point.y);this.ctx.rotate(radian * -1);if (percent > 0.3 && idx === second) {this.ctx.fillStyle = this.frontColor;} else {this.ctx.fillStyle = this.backColor;}this.ctx.fillText(v, 0, 0);this.ctx.rotate(radian);this.ctx.translate(point.x * -1, point.y * -1);});});},drawTimeUnit() {this.ctx.fillStyle = '#fff';this.ctx.fillText(this.now.getFullYear()+' 年', this.center.x - 20, this.center.y);this.ctx.fillText('日', this.center.x + 300, this.center.y);this.ctx.fillText('时', this.center.x + 400, this.center.y);this.ctx.fillText('分', this.center.x + 540, this.center.y);this.ctx.fillText('秒', this.center.x + 660, this.center.y);this.ctx.fillStyle = '#666';},pointInCircle(radius, radian) {return {x: this.center.x + radius * Math.cos(radian),y: this.center.y - radius * Math.sin(radian)};},numberToText(number) {if (number <= 10) {return this.wordsMapping[number];}const words = number.toString().split(/|/);if (number < 20) {return '十' + this.wordsMapping[+words[1]];}if (number % 10 === 0) {return this.wordsMapping[+words[0]] + '十';}return this.wordsMapping[+words[0]] + '十' + this.wordsMapping[+words[1]];},//全屏fullsScreen(){let docElm = document.documentElement; //W3C if (docElm.requestFullscreen) {docElm.requestFullscreen(); } //FireFox else if (docElm.mozRequestFullScreen) {docElm.mozRequestFullScreen(); } //Chrome等 else if (docElm.webkitRequestFullScreen) {docElm.webkitRequestFullScreen(); } //IE11 else if (elem.msRequestFullscreen) {elem.msRequestFullscreen(); } }}});</script></body></html>
