收藏
回答

新版canvas的drawImage当第一个参数是canvas时在IOS上无效

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas drawImage 微信iOS客户端 8.0.39 2.33.0

IOS 16.3.1

点击按钮时,将canvas1的内容绘制到canvas2,在开发工具与安卓客户端表现正常,在ios客户端无反应,不报错。

<!--index.wxml-->
<view class="container">
  <canvas id="canvas1" type="2d" style="width: 100px;height: 100px;"></canvas>
  <canvas id="canvas2" type="2d" style="width: 100px;height: 100px;"></canvas>
  <button type="primary" bindtap="draw">点击drawImage</button>
</view>


// index.js
// 获取应用实例
const app = getApp()


Page({
  data: {
    canvas1:{},
    ctx1:{},
    canvas2:{},
    ctx2:{},


  },


  onLoad() {
      console.log(this.data.canvas1,this.data.canvas2)
    wx.createSelectorQuery()
    .select('#canvas1'// 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        this.data.canvas1 = res[0].node
        // Canvas 画布的实际绘制宽高
        const renderWidth = res[0].width
        const renderHeight = res[0].height
        // Canvas 绘制上下文
        this.data.ctx1 = this.data.canvas1.getContext('2d')


        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        this.data.canvas1.width = renderWidth * dpr
        this.data.canvas1.height = renderHeight * dpr
        this.data.ctx1.scale(dpr, dpr)
        this.data.ctx1.fillStyle = "#F00";
        this.data.ctx1.fillRect(0,0,100,100);
        console.log(this.data.canvas1)
    })
    wx.createSelectorQuery()
    .select('#canvas2'// 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        this.data.canvas2 = res[0].node
        // Canvas 画布的实际绘制宽高
        const renderWidth = res[0].width
        const renderHeight = res[0].height
        // Canvas 绘制上下文
        this.data.ctx2 = this.data.canvas2.getContext('2d')


        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        this.data.canvas2.width = renderWidth * dpr
        this.data.canvas2.height = renderHeight * dpr
        this.data.ctx2.scale(dpr, dpr);
        this.data.ctx2.fillStyle = "#0F0";
        this.data.ctx2.fillRect(0,0,100,100);
        console.log(this.data.canvas2)
    })
  },
  
  draw() {
        console.log(this.data.canvas1);
        this.data.ctx2.drawImage(this.data.canvas1,0,0,100,100,0,0,100,100);
  }
})




回答关注问题邀请回答
收藏
登录 后发表内容