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