小程序canvas绘图最新

 const query = wx.createSelectorQuery()

            query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {

                console.log(res)

                const canvas = res[0].node;

                const dpr = wx.getSystemInfoSync().pixelRatio;

                console.log(dpr)

                canvas.width = res[0].width * dpr

                canvas.height = res[0].height * dpr

                const ctx = canvas.getContext('2d')

                ctx.scale(dpr, dpr)

               //canvas.createImage()在微信版本7.0.20会有报错，进入不了onload。 但是在7.0.21已经修复。

                let pic = canvas.createImage();

                ctx.fillRect(0, 0, 100, 100)

                pic.src = "http://ddsds.sds.cn/commdddunityDocs/202201/0f2fb2eed555431eb987c288dd41bd87.png"; //可以是本地，也可以是网络图片

                console.log(pic)

                pic.onload = () => {

                //不要用官方示例的图片路径，包括网上在这之前所有的文档/示例里是地址链接的都不要看了，要用image对象！

                    ctx.drawImage(pic,0, 0, 150, 150);

                }

            })

 

<canvas style="width: 300px;height: 300px;" type="2d" id="myCanvas"></canvas>