https://developers.weixin.qq.com/s/ltk33MmD7ipC
<text>canvas 2d width大于1365 就绘画不了 </text>
<text>width: 1365px</text>
<canvas type="2d" id="canvas" class="canvas" style="width: 1365px; height: 200px; border: 2rpx solid greenyellow;" ></canvas>
<text>width: 1366px 不支持</text>
<canvas type="2d" id="canvasTwo" class="canvas" style="width: 1366px; height: 200px; border: 2rpx solid blue;" ></canvas>
onReady: function () {
const queryTwo = wx.createSelectorQuery()
queryTwo.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res)
const canvas = res[0].node
var ctx = canvas.getContext('2d')
console.log(ctx)
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// 创建一个渐变
var gradient=ctx.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 填充一个渐变
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);
ctx.fillText("Big smile!",10,120);
ctx.fillText("Big smile!",160,90);
// ctx.restore();
ctx.save();
const query = wx.createSelectorQuery()
query.select('#canvasTwo')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res)
const canvas1 = res[0].node
const ctx1 = canvas1.getContext('2d')
const dpr2 = wx.getSystemInfoSync().pixelRatio
canvas1.width = res[0].width * dpr2
canvas1.height = res[0].height * dpr2
ctx.scale(dpr, dpr)
ctx1.fillText("Big smile!",10,90);
ctx1.fillText("Big smile!",10,120);
ctx1.fillText("Big smile!",160,90);
})
})
},
是的 1400是临界点,我猜这样可以避免小程序闪退,因为canvas真的很占用资源
但小程序 不可能用大部分微信的内存。。。剩下。。。你懂 的
移动端不可能有这么大的屏幕