编程语言
首页 > 编程语言> > 小程序canvas绘图最新

小程序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>

标签:canvas,const,dpr,res,pic,程序,绘图,ctx
来源: https://www.cnblogs.com/sjruxe/p/15829572.html