微信小程序新版canvas绘制图片方法

最新推荐文章于 2024-01-13 03:19:42 发布

小董大咖

最新推荐文章于 2024-01-13 03:19:42 发布

阅读量319

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/ddf__/article/details/128998692

版权

<canvas type="2d" id="myCanvas" style="width: 100%;height: 100vh"></canvas>

Page({
  onReady:function () {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr     // 获取宽
        canvas.height = res[0].height * dpr  // 获取高
        ctx.scale(dpr, dpr)
        
        // 到这里就可以直接绘制
         let image = canvas.createImage();//创建iamge实例
        image.src = '引入本地的图片背景图';  // 引入本地图片
        image.onload = function () {
          ctx.drawImage(image, 0, 0, 289, 370); // 背景图
 
  }
})