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);
}
})
iOS 的 skiacanvas 就没支持过。