【小程序】 Canvas绘制模糊，变高清的史诗级理解!

图解，贼重要，不理解，仔细品！

成品展示

• 清晰度对比一下！是不是清晰了
• 此时注意。清晰比例在电脑上更高时,，会模糊，但手机上不会
• 所以电脑上调试清晰比例2就行

展示代码，粘贴即可用

<template><view><canvas :style="{width:Artwidth+ 'px',height:Artheight + 'px'}" id="CanvasDraw" type="2d"></canvas><button @click="beginDrawImg">开始绘制</button></view></template><script>
    export default{data(){return{
                Artwidth:0,
                Artheight:0,
                dpr:1,//可以设置为全局，看需要}},
        methods:{beginDrawImg(){//获取设备像素比，也可以直接把比列写死传过去
                let dpr = wx.getWindowInfo().pixelRatio ||1;
                this.DrawImg('#CanvasDraw',0,0,375,200,2)},//canvas的ID名、绘制的x位置，绘制的y位置，绘制的宽，绘制的高，清晰的倍数DrawImg(CVID, x, y, w, h, dpr){
                let that = this
                const query = uni.createSelectorQuery().in(this)
                query.select(CVID).fields({
                    node: true,
                    size: true
                }).exec(res =>{const{
                        node: canvas
                    }= res[0];const ctx = canvas.getContext('2d');const dataInfo = that.scaleValue(x, y, w, h, dpr)
                    dataInfo.then((res)=>{//你一直也看不见的画布宽高，尽情放大，//这里有点难理解，打个比方理解一下，就相当于看的见的画布，放这你看不见的被放大的画布//就相当于井底之娃，看的天空看起来很小，实际上那一小片有着看不到的非常大的宇宙
                        canvas.width = res.w
                        canvas.height = res.h
                        //看的见的画布大小，按实际需求赋值
                        that.Artwidth = w
                        that.Artheight = h
                        //获取图片实例，去绘制const bgimage = canvas.createImage()const IMG = that.Drawimg()
                        IMG.then((img)=>{
                            bgimage.onload =()=>{//先绘制在看不见的放大的画布上
                                ctx.drawImage(bgimage,0,0,canvas.width,canvas.height)//然后将当前绘图放大，切记理解这个，不是放大画布，而是放大你的绘图内容
                                ctx.scale(dpr, dpr);}
                            bgimage.src = img
                        })},(err)=>{})})},//同比放大绘制的内容，目的为了高清scaleValue(x, y, w, h, dpr){return new Promise((resolve, reject)=>{const data ={
                        x: x * dpr,
                        y: y * dpr,
                        w: w * dpr,
                        h: h * dpr,}resolve(data)})},// 绘制图片Drawimg(){return new Promise((resolve, reject)=>{
                    uni.chooseImage({
                        success:function(res){
                            console.log(res.tempFilePaths[0])resolve(res.tempFilePaths[0])}})})}}}</script><style></style>

献给新入行的小伙伴的代码。更容易理解！

<template><canvas :style="{width:Artwidth+ 'px',height:Artheight + 'px' }" id="Articulation6" type="2d"></canvas></template><script>
    export default{data(){return{
                Artwidth:"",
                Artheight:"",
                w:400,
                h:300,
                dpr:1,}},
        methods:{//画布盒子changemax1(){
                let that = this
                const query = uni.createSelectorQuery().in(this)
                console.log(query)
                query.select("#Articulation6").fields({
                    node: true,
                    size: true
                }).exec(res =>{const{
                        node: canvas
                    }= res[0];//获取设备像素比// that.dpr = wx.getWindowInfo().pixelRatio || 1;
                    that.dpr =2//变大的画布
                    canvas.width = that.w * that.dpr
                    canvas.height = that.h * that.dpr
                    //展示的画布
                    that.Artwidth = that.w
                    that.Artheight = that.h
                    //绘制const ctx = canvas.getContext('2d');const bgimage = canvas.createImage()//自己上传图片
                    uni.chooseImage({
                        success:function(res){
                            console.log(res.tempFilePaths[0])
                            bgimage.onload =()=>{
                                ctx.drawImage(bgimage,0,0, canvas.width,canvas.height)
                                ctx.scale(that.dpr, that.dpr);}
                            bgimage.src = res.tempFilePaths[0]}})})},}}</script>

欢迎提出这个canvas的各种坑！