用canvas2d绘制海报,通过如下方式设置canvas宽度。
wxml如下:
<view class='poste_box' id='canvas-container'>
<canvas type="2d" id="canvas" style="width:100%; height: {{canvasH}}px;" />
</view>
wxss如下:
.poste_box {
width: 90%;
margin: auto;
position: relative;
top: 50rpx;
background-color: #fff;
border: 1rpx solid #ddd;
box-shadow: 0px 0px 10px 5px #d8d7dd;
border-radius: 20rpx;
overflow: hidden;
}
js如下:
wx.createSelectorQuery()
.select("#canvas")
.fields({
node: true,
size: true,
rect: true,
})
.exec(
((res) => {
const width = res[0].width;
var height = res[0].height;
const canvas = res[0].node;
canvas = canvas;
const ctx = canvas.getContext("2d");
// 开始绘制
const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
// ...
}).bind(this))
在开发者工作或者安卓表现正常,如下
在iphone7(ios13.5)上,微信版本号:7.0.14。有时候会如下如下的情况
你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)