用canvas来做多彩数字

作为前端开发，想必大家都看过产品跟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);
            },

最后的效果：