微信端内置浏览器对canvas的支持有问题

最新推荐文章于 2021-07-03 08:02:26 发布

码农下的天桥

最新推荐文章于 2021-07-03 08:02:26 发布

阅读量1.1w

点赞数

微信端内置浏览器对canvas的支持有问题

blue_blue 7 2月3日提问 · 2月3日更新

代码如下：

<canvas id="myCanvas" width="800" height="800" style="display:block;"></canvas>
<script type="text/javascript">    
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(400,400);
    ctx.lineWidth=2;
    ctx.strokeStyle= "#ff0000"; 
    ctx.stroke();
</script>

效果如下图所示：

图1 如下图所示是微信端的效果(安卓手机有问题，苹果手机没有问题)，

图2 如下图所示是其他浏览器的效果，包括在qq中打开

链接
评论
更多

默认排序时间排序

4 个回答

丁亚光 864 2月4日回答

感觉是你canvas的位置不对，设置html body canvas 的padding margin 都为0 试试

链接
2 评论
更多

王铁手 3.1k 2月4日回答

感觉微信那边是放大了一样，确定没有缩放页面？

链接
1 评论
更多

mfive 2 3月14日回答

遇到同样的问题，canvas缩放在iOS上没有问题，在Android微信中打开不能横向缩放，在Android手机上各种浏览器上是正常的，在PC端上用chrome测试也是正常的。

链接
评论
更多

青岛小龟 216 2月5日回答 · 2月5日更新

不是安卓和苹果的问题，是屏幕像素比的问题，用window.devicePixelRatio获取到你手机屏幕的像素比，然后对应比例来设置canvas里的参数，而且直接用canvas画图，会很模糊，怎么解决呢，我从网上查阅了一下，自己写了一个函数，你看下

function CanvalHD(canvasThis,ctxThis){
    (function (canvas, ctx) {
        var devicePixelRatio = window.devicePixelRatio || 1;
        var backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||
                                     ctx.mozBackingStorePixelRatio ||
                                     ctx.msBackingStorePixelRatio ||
                                     ctx.oBackingStorePixelRatio ||
                                     ctx.backingStorePixelRatio || 1;
        var ratio = devicePixelRatio / backingStorePixelRatio;
        if (devicePixelRatio !== backingStorePixelRatio) {
            var oldWidth = canvas.width;
            var oldHeight = canvas.height;
            canvas.width = oldWidth * ratio;
            canvas.height = oldHeight * ratio;
            canvas.style.width = oldWidth + 'px';
            canvas.style.height = oldHeight + 'px';
            ctx.scale(ratio, ratio);
            }
        })(canvasThis, ctxThis);
    }