让canvas绘图更清晰

思路

将canvas按比例缩放，图片会更清晰（图片质量也随之增大）

代码如下

 function canvasFn (scale) {
        let canvas = document.createElement('canvas')
        let w = 100;
        let h = 150;
        canvas.width = w * scale;
        canvas.height = h * scale;
        canvas.style.width = w + "px";
        canvas.style.height = h + "px";

        let ctx = canvas.getContext('2d')
        let imageObj = new Image()
        imageObj.setAttribute('crossorigin', 'anonymous')
        imageObj.src = 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/images/ee649d5b94fd4009adc9b325adce9a17.jpg'
        imageObj.onload= ()=> {
            ctx.drawImage(imageObj,0,0,canvas.width,canvas.width)
            ctx.font= 10*scale + "px/1 Tahoma,Helvetica,Arial,'宋体',sans-serif";
            ctx.fillStyle = "#192689"
            ctx.fillText("零三的笔记",10*scale,(h-40)*scale)
            ctx.fillText("https://web03.cn",10*scale,(h-40+10)*scale)

            ctx.scale(scale,scale);
            //生成图片
            let imgSrc = canvas.toDataURL("image/png")
            let imgDom = document.createElement('img')
            imgDom.className = 'ctx-img-' + scale
            imgDom.src = imgSrc
			console.log(`缩放${scale}倍后质量为` + imgSrc.length)
            document.body.appendChild(imgDom)
        }
    }

执行如下缩放代码

canvasFn(1)
canvasFn(2)
canvasFn(3)
canvasFn(4)

结果

结果很明显，缩放越大，它的清晰度越高，质量也变大了