作為前端開發，想必大家都看過產品跟UI設計的美輪美奐的設計圖吧，那真是精彩絕倫，創意無限啊，但是問題來了，你要讓我用程式碼全部給你還原？喂！產品你過來一下，我有話跟你說！

咳咳，其實也沒那麼難了，車到山前必有路不是嘛！ 上面這兩種數字表現形式經常在各種活動頁面端用到，這種字直接用css肯定寫不出來，你讓UI給你一段固定的數字，也不現實啊，數字得隨時變化。接下來canvas登場。 首先把所有的數字分開剪下成單獨的數字

程式碼部分：

function changeurl(numbers,flag,width,height){//numbers代表你具體需要的數字 例：234 width：畫布寬  height 畫布高 falg代表是哪一塊的數字
                let that = this;
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                canvas.width = width;
                canvas.height = height;
                ctx.rect(0,0,canvas.width,canvas.height);
                ctx.fillStyle='transparent';//畫布填充顏色
                ctx.fill();
                var str = numbers.toString();
                console.log(str)
                let len = str.length;
                var tt;
                if(width==50){//這一程式碼，是我根據我每張單獨圖片寬度計算畫布所需寬度，排版美觀，可以忽略
                    tt=0
                }else{
                    if(len>=4){
                        tt = 0;
                    }else if(len>=3){
                        tt = 1;
                    }else if(len==2){
                        tt = 2;
                    }else if(len==1){
                        tt = 3;
                    }
                }
                let base64;
                function drawing(n){
                    if(n<len){
                        var img=new Image;
                        //img.crossOrigin = 'Anonymous'; //解決跨域
                        img.src=require(`../assets/img/activity_${str[n]}.png`);//這裡引入你圖片的路徑
                        img.onload=()=>{
                            ctx.drawImage(img,(n+tt)*23,0,25,33);//25  33 是每張圖片的寬高，這裡主要是排版
                            drawing(n+1);//遞迴
                        }
                    }else{
                        //儲存生成作品圖片
                        base64 = canvas.toDataURL("image/png");
                        if(flag==1){ //因為有非同步載入，所以沒有直接return出去，這裡用變數賦值
                            that.num1 = base64;
                        }else if(flag==2){
                            that.num2 = base64;
                        }else if(flag==3){
                            that.num3 = base64;
                        }
                    }
                }
                drawing(0);
            },
 

最後的效果：