借鉴最近抖音平台及华为应用主题里流行的 炫酷时钟做的一个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的地址
点击上边的链接即可