基础库:2.21.0,在开发者工具上使用新版canvas 2d绘制了一个长宽100的正方形,结果完全变形。
使用vivo手机真机也是一样
代码如下:
<canvas type="2d" id="myCanvas" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchEnd" style="width: {{baseWidth}}px;height: {{baseHeight}}px;">
</canvas>
this.context.beginPath(); this.context.moveTo(10, 10); this.context.lineTo(10, 100); this.context.lineTo(100, 100); this.context.lineTo(100, 10); this.context.lineTo(10, 10); this.context.stroke();
绘制结果
线条粗细也不一样,正方形长宽也不一样,还很模糊
// 把你wxml上的 style去掉吧。 Page({ onReady() { const query = wx.createSelectorQuery() query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) ctx.beginPath(); ctx.moveTo(10, 10) ctx.lineTo(10, 100) ctx.lineTo(100, 100) ctx.lineTo(100, 10) ctx.lineTo(10, 10) ctx.stroke() }) } })