共计 1945 个字符，预计需要花费 5 分钟才能阅读完成。
借鉴最近抖音平台及华为利用主题里风行的 炫酷时钟做的一个 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 的地址
点击上边的链接即可
正文完