srammark
srammark
  • 发布:2022-11-29 16:08
  • 更新:2022-11-29 16:08
  • 阅读:651

帮你跳过Canvas操作大坑

分类:uni-app

重点:绝对不要重新设定canvas对象的width属性(不是.style.width)!!!!!

操作:
我把之前的JS模块拿到uniapp里用(在renderjs里调用),发现canvas绘制总是有问题,但是问题又不是稳定复现。
操作流程是:打开页面 => 初始化canvas => 渲染canvas => 结果 文字渲染行数超出
在我多次尝试后发现,假如在页面渲染前使用context.fillRect()刷新canvas,渲染结果就是正确的。不过偶尔会失效。

原因:
之前的JS模块已经做了高清化处理,而uniapp也做了高清处理。
高清化处理无非就是修改canvas.width然后缩放content即可。
但是无论你怎么操作canvas.width和canvas.height都是无效的,关了自动高清化也改不了,开了还是改不了。
这里最恶心,由于操作无效,导致我以为没有修改成功,于是保留了旧代码。
后面修改后直接打印,发现值是修改成功的。不过执行了context.fillRect()操作后值又变回去了。
这里我可以确定了,uniapp内部的方法会重置数值。

处理:
那好办,每次uniapp重置,我也重置回来就行。
结果是卡的起飞,渲染还是有问题。
想了又想,抱着试一试的想法把处理canvas.width的地方注释了。
没想到注释了就好了...

这个问题弄了我2星期,官方文档那叫一个简单,啥也没说。
要不是看示例,发现没有对canvas.width的操作感觉可以尝试尝试,估计还能卡一个月。

1 关注 分享
1***@qq.com

要回复文章请先登录注册