微信小程序中canvas竟然不支持width与height属性

最新推荐文章于 2023-10-11 17:14:56 发布

weixin_34343689

最新推荐文章于 2023-10-11 17:14:56 发布

阅读量1.4k

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/huangxiujie/blog/901993

版权

2019独角兽企业重金招聘Python工程师标准>>>

上图对比，后图明显模糊了。

小程序数据统计页面.png

自己实现的折线图

在PC中可以像这样将width与height设置为css的2倍可以解决retina屏适配，而小程序中不可以，直接将<canvas>中的width与height属性过滤了。

<!DOCTYPE HTML>
<html>
    <body>
        <canvas id="myCanvas" width="2000" height="2000" style="width:1000px;height:1000px;">your browser does not support the canvas tag123213 </canvas>

        <script type="text/javascript">

            var canvas=document.getElementById('myCanvas');
            var ctx=canvas.getContext('2d');
            ctx.fillStyle='#ff6600';
            ctx.fillRect(0,0,500,500);

        </script>
    </body>
</html>

如果对比ppi换算结果不是刚刚2倍的，，可以使用如下的代码来获取ratio值

backingStore = context.backingStorePixelRatio ||
						context.webkitBackingStorePixelRatio ||
						context.mozBackingStorePixelRatio ||
						context.msBackingStorePixelRatio ||
						context.oBackingStorePixelRatio ||
						context.backingStorePixelRatio || 1;

以上代码摘自：https://github.com/jondavidjohn/hidpi-canvas-polyfill

尝试在小程序中去比划比划

<canvas canvas-id="line-canvas" id="line-canvas" tabindex="2" width="750" height="400" style="width: 375px; height: 200px;"></canvas>

结果在Wxml调试窗口成这样了

输入图片说明

w3c说得很清楚，有width与height属性的，为什么不走w3c寻常路呢。http://www.w3school.com.cn/html5/html5_canvas.asp

反观微信团队自己出的小程序数据助手却支持retina屏，为这个问题花了1天时间了，不知道要怎么破了。

转载于:https://my.oschina.net/huangxiujie/blog/901993

weixin_34343689

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序中canvas竟然不支持width与height属性

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

微信小程序中canvas竟然不支持width与height属性

“相关推荐”对你有帮助么？