是一个H5在线地址：http://www.ooo0o.com/2019/fas...JS包已经发布到npm(https://www.npmjs.com/package...npmifashionclock//Vue项目导入方法一：//constfashionclock=require('fashionclock')//Vue.prototype.fashionclock=fashionclock//Vue项目导入方法二：importfashionclockfrom'fashionclock'Vue.prototype.fashionclock=fashionclock//调用该方法时需要传递的params的值应该是下面cvsparams的结构//在组件中使用之前在data中定义自定义变量，下面的cvsparams可以用....背景图片==中间字符颜色==时间字体颜色==画布背景颜色（默认透明）==圆盘轮廓颜色selectdom:'div>#clockcvs',//selectorcvswh:viewwidth,//画布宽度andheightword:'Pang',//中间字wordsize:'',//中间字大小timesize:'',//时间字体大小bgclolr:'',//磁盘背景色bgpic:'',//画布标签父背景图片wordcolor:'',//中间词颜色timecolor:'',//时间字体颜色框bgclolr:'',//canvas背景色（默认透明）outlinecolor:'',//盘面轮廓色currentboxcolor:''//当前时间段填充色}})...........mounted(){this.fashionclock(this.cvsparams)}............scriptimportmethod//调用这个方法需要传递params值应该是下面cvsparams的结构体。如果项目在移动端使用，需要使用css3的scale，根据当前宽度与最小宽度716的比例来设置缩放。动态设置示例可以参考示例index.html：在项目页面index.htmlletcvsparams={//selector==canvas宽高值==中间字==中间字大小==时间字体大小==光盘背景颜色==背景图片==中间字颜色==timefontcolor==canvas背景颜色（默认透明）==圆盘轮廓颜色selectdom:'div>#clockcvs',//selectorcvswh:viewwidth,//canvas宽高值word:'Pang',//中间的字号:'',//中间字符大小timesize:'',//时间字体大小bgclolr:'',//圆盘背景颜色bgpic:'',//画布标签父背景图片wordcolor:'',//中间字符颜色timecolor:'',//时间字体颜色框bgclolr:'',//画布背景颜色（默认透明）outlinecolor:'',//磁盘轮廓颜色currentboxcolor:''//当前时间框填充颜色}fashionclock(cvsparams)项目介绍：基于canvas的实时时间显示，在绿色（颜色可自定义）块中动态显示时间。前面的参数设置里面可以配置各种颜色和字体设置github:https://github.com/Chiinegoodman/fashion_clock立项原因：电话面试的时候，面试官问我大转盘是不是之前做的彩票可以用canvas的形式实现，请我提供一些想法。Canvas在前端开发的过程中，研究过，学习过。但是我接触的工作很少，对深层次的了解不多，所以当面试官问我的时候，我还是有点懵，因为我一直接触的都是静态的，抽签是有动态显示。项目过程：前期个人没什么想法，于是在网上搜索了demo，看到了两个demo的实现效果。根据奖品数据，我通过canas在底部做了一个轮盘，在轮盘的最上面放了一个箭头图片来控制箭头的方向，在箭头的旋转上加了一个transition属性到over-动画。看了两个demo，觉得没什么技术含量，又想起前几天看到的这个Coolclock，我就是想做这样一个基于canvas的项目，也算是回顾一下吧帆布的研究！fashion_clock自己写的时钟插件，欢迎安装使用。这个是github的地址，直接点击上面的链接
