关于javascript:好玩的canvas基于css3和canvas实现的-时钟插件

借鉴最近抖音平台及华为利用主题里风行的 炫酷时钟做的一个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的地址

点击上边的链接即可