jym 微信小程序 canvas 2D 在进行 ctx.s - 阿懒 - 沸点 - 掘金

掘金首席体验官

jym 微信小程序 canvas 2D 在进行 ctx.scale(dpr, dpr) 设置后后续设置的值是 css 里面的值单位是 rpx 还是应该使用换成 px 的值呢？伪代码如下

const imgWidth = 720
const imgHeight = 1212
const canvasWidth = imgWidth // canvas style 动态设置 width: {{canvasWidth }}px
const canvasHeight = imgHeight // canvas style 动态设置 height: {{canvasHeight }}px

const ctx = canvas.getContext('2d');
const windowInfo = wx.getWindowInfo()
const dpr = windowInfo.pixelRatio;
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)

const image = canvas.createImage();
image.onload = () => {
ctx.drawImage(image, 0, 0, width, height);
// 在 css 中设置 font-size=42rpx 那么这里应该写多少 px?
const fontSize = '' // 当这里的值是 42px 时实际效果偏差不多，转换为px 的值是 21px,使用 21px 实际差距较大
ctx.font = `bold ${fontSize}px normal`;
}
image.src = 'xxx.jpg'

展开

赞过