<view>
<canvas
id="canvas"
canvas-id="canvas"
type="2d"
style="width:200px;height:200px;background-color: yellow;"
/>
</view>
Page({
onLoad() {
wx.createSelectorQuery()
.select('#canvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// Canvas 画布的实际绘制宽高
const renderWidth = res[0].width
const renderHeight = res[0].height
// Canvas 绘制上下文
const ctx = canvas.getContext('2d')
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = renderWidth * dpr
canvas.height = renderHeight * dpr
ctx.scale(dpr, dpr)
ctx.rotate((90 * Math.PI) / 180);
const image = canvas.createImage();
image.onload = () => {
// 顺时针旋转90度
// 开发工具与安卓正常,IOS不正常
ctx.drawImage(
image,
0,0,
200,
-200
);
};
image.src = 'https://th.bing.com/th/id/OIP.JuSM25g1b2eEYu-2KbGpVwHaHI?pid=ImgDet&rs=1';
})
},
})
开发工具和安卓正常展示
IOS绘制图片失败
0,0,200,-200 替换成
0,-200,200,200 规避下