借鉴最近抖音平台及华为利用主题里风行的 炫酷时钟做的一个H5
线上地址:http://www.ooo0o.com/2019/fas...
JS包曾经公布到npm下来(https://www.npmjs.com/package...
npm i fashionclock // vue我的项目引入形式一: // const fashionclock = require('fashionclock') // Vue.prototype.fashionclock =fashionclock // vue我的项目引入形式二: import fashionclock from 'fashionclock' Vue.prototype.fashionclock =fashionclock // 调用此办法须要传的的params的值应为 下边cvsparams的构造 //在组件中应用前 定义好data里的自定义变量,如下的 cvsparams 即可 .................. data(){ return{ cvsparams : { // 选择器==画布宽高值==两头的字==两头字大小==工夫字体大小==圆盘背景色==背景图片==两头字色彩==工夫字体色彩==画布背景色(默认通明)==圆盘的outline色 selectdom:'div>#clockcvs', //选择器 cvswh:viewwidth, //画布宽高值 word:'庞', //两头的字 wordsize:'', //两头字大小 timesize:'', //工夫字体大小 bgclolr:'', //圆盘背景色 bgpic:'', //画布canvas标签父级的背景图片 wordcolor:'', //两头字色彩 timecolor:'', //工夫字体色彩 boxbgclolr:'', //画布背景色(默认通明) outlinecolor:'', //圆盘的outline色 currentboxcolor:'' //以后工夫框的填充色 } } ) .................. mounted(){ this.fashionclock(this.cvsparams) } .................. script引入形式 // 调用此办法须要传的的params的值应为 下边cvsparams的构造 若我的项目用在挪动端时,须要应用css3的scale 依据以后宽度与最小宽度716的比值去设置缩放,可参考例子index.html进行动静设置 例子： 我的项目页面index.html中 let cvsparams = { // 选择器==画布宽高值==两头的字==两头字大小==工夫字体大小==圆盘背景色==背景图片==两头字色彩==工夫字体色彩==画布背景色(默认通明)==圆盘的outline色 selectdom:'div>#clockcvs', //选择器 cvswh:viewwidth, //画布宽高值 word:'庞', //两头的字 wordsize:'', //两头字大小 timesize:'', //工夫字体大小 bgclolr:'', //圆盘背景色 bgpic:'', //画布canvas标签父级的背景图片 wordcolor:'', //两头字色彩 timecolor:'', //工夫字体色彩 boxbgclolr:'', //画布背景色(默认通明) outlinecolor:'', //圆盘的outline色 currentboxcolor:'' //以后工夫框的填充色 } fashionclock(cvsparams)我的项目介绍: 基于canvas做的实时工夫显示,动静将工夫显示在绿色(色彩可自定义)块处.在后面的参数设置处能够自行配置多种色彩及字体的设置github: https://github.com/Chinegoodman/fashion_clock我的项目发动原因: 在一次电话面试中,面试官问我之前做的大转盘抽奖流动,可不可以通过canvas画布的模式来实现并让我提供一下思路.画布集体在前端开发过程中,钻研学习过.然而工作中接触的少,深层次的就不太理解了, 所以面试官问的时候集体还是有些懵的,因为我接触过的都是动态的,而抽奖是有一个动效显示的. 我的项目过程: 初期,我集体没有脉络,就在网上找寻demo,看了两个demo的实现成果,就是依据奖品数据,通过canas做一个底部的轮盘,在轮盘上边放一个箭头图片,来管制箭头的指向,同时给箭头的旋转增加transition属性,来适度动画 看完两个demo后我感觉切实没有太多的技术含量,又联想起前些天看到过的这个炫酷时钟,我就想基于canvas做这样一个我的项目,算是对canvas的温习与学习吧!fashion_clock 本人写的一个时钟插件。欢送装置应用。这是github的地址
点击上边的链接即可