canvas 画图移动端出现锯齿毛边的解决方法

最新推荐文章于 2023-05-30 18:44:41 发布

泥猴桃

最新推荐文章于 2023-05-30 18:44:41 发布

阅读量6.3k

点赞数

分类专栏： canvas 文章标签： canvas 移动端

本文链接：https://blog.csdn.net/shi851051279/article/details/82156336

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近项目中用的canvas 越来越多，但是之前都是在canvas 上画图片，
最近这次是做一个折线图，自己画出来以后发现有锯齿，百度一番后找到了解决办法，记录到博客里。

声明一下，我用的是第二种方法，第一种方法，看代码原理没问题，也就整理过来了

使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题

出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像素的手机上显示时, 这个canvas的内容其实是经过拉伸的, 所以会出现模糊和锯齿.

解决方案一：

就是在canvas标签中设置了width=”200”,height=”200”之外, 还在外部的CSS样式表中设置了该canvas的宽度为100%，然后在画图时把canvas的的宽度设为手机端的最大像素值, 因为现在的手机端宽度的最大的只有1080像素宽, 所以就把canvas的宽度和高度设为200的6倍也就是1200像素, 按照这个像素画完之后, width:100%又会把canvas的宽度和高度缩小至父元素的宽和宽那么大, 因此整个canvas被缩小了, 大尺寸的canvas内容被缩小了之后肯定不会产生锯齿现象，解决的原理其实就是画图时候将canvas的宽和高放大一定的倍数，按照放大后的canvas宽和高画图，然后画完之后再将canvas缩小为目标宽和高，这样解决的方法存在的问题是，在PC端反而锯齿会更明白，只是移动端的效果很好，所以在pc端不需要放大倍数，实例如下：


<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>html5 canvas 画图移动端出现锯齿毛边的解决方法</title>
    <style type="text/css">
    #canvas {
        width: 100%;
    }
    </style>
</head>

<body style="background: url(blue_bj.jpg);">
    <div style="width: 200px">
        <canvas id="canvas" width="200" height="200"></canvas>
    </div>
</body>

</html>
<script type="text/javascript">
// 判断是移动还是pc
function IsPC() {
    var userAgentInfo = navigator.userAgent,
        Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"
        ],
        flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
//PC端和移动端方法倍数的判断
var scale = 1;
if (!IsPC()) {
    scale = 6;
}
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
//画一个空心圆
cxt.beginPath();
canvas.width = canvas.width * scale;
canvas.height = canvas.height * scale;
cxt.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 - scale * 16, 0, 360, false);
cxt.lineWidth = scale * 16;
cxt.strokeStyle = "#faff6d";
cxt.stroke();
cxt.closePath();
</script>

解决方案二：

使用window.devicePixelRatio设备上物理像素和设备独立像素(device-independent pixels (dips))的比例来设置canvas实际需要放大的倍数，原理与上一种方法一样，区别在于　devicePixelRatio取出的是实际的比例倍数，在pc端显示为1，避免了上种方法PC端不判断同样放大一样倍数画图出现明显锯齿问题，但是devicePixelRatio各个浏览器的兼容性不是很好，这是唯一缺陷，实现方法如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>html5 canvas 画图移动端出现锯齿毛边的解决方法</title>
</head>
<body style="background: url(blue_bj.jpg);">
    <canvas id="canvas" width="200" height="200" ></canvas>
</body>
</html>
<script type="text/javascript">
    var canvas=document.getElementById("canvas");
    var cxt=canvas.getContext("2d");
    //画一个空心圆
     cxt.beginPath();
     var width = canvas.width,
         height=canvas.height;
    if (window.devicePixelRatio) {
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        canvas.height = height * window.devicePixelRatio;
        canvas.width = width * window.devicePixelRatio;
        cxt.arc(canvas.width/2,canvas.height/2,canvas.width/2-16 * window.devicePixelRatio,0,360,false);
        cxt.lineWidth=16 * window.devicePixelRatio;
        cxt.strokeStyle="#faff6d";
        cxt.stroke();//画空心圆
        cxt.closePath();
        cxt.scale(window.devicePixelRatio, window.devicePixelRatio);
    }
</script>

如果是用jquery 的话，要把jquery 对象转换成dom 对象！比如
var canvas = $(“#mycanvas”);
canvas[0].style.width = width + ‘px’;

如果用 canvas.width(width+’px’)；
这种方法不行，因为jq 获取的元素是一个集合，必须要用 [0] 才能拿到dom 元素

泥猴桃

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas 画图移动端出现锯齿毛边的解决方法

最近项目中用的canvas 越来越多，但是之前都是在canvas 上画图片，最近这次是做一个折线图，自己画出来以后发现有锯齿，百度一番后找到了解决办法，记录到博客里。声明一下，我用的是第二种方法，第一种方法，看代码原理没问题，也就整理过来了使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题出现这个问题的原因应该是手机的宽是720像素的, 而这个...
复制链接

扫一扫