好玩的canvas-基於css3和canvas實現的時鐘插件

時間 2021-02-19

標籤 css html 前端 vue css3 git github 面試 npm canvas 欄目 CSS 简体版

原文原文鏈接

借鑑最近抖音平臺及華爲應用主題裏流行的炫酷時鐘作的一個H5css

線上地址:http://www.ooo0o.com/2019/fas...html

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的複習與學習吧!