html5 canvas 畫圖移動端出現鋸齒毛邊的解決方法

時間 2019-11-10

標籤 html5 html canvas 畫圖移動端出鋸齒毛邊解決方法欄目 HTML5 简体版

原文原文鏈接

使用HTML5的canvas元素畫出來的.在移動端手機上測試都發現畫圖有一點鋸齒問題javascript

出現這個問題的緣由應該是手機的寬是720像素的, 而這個canvas是按照小於720像素畫出來的, 因此在720像素的手機上顯示時, 這個canvas的內容實際上是通過拉伸的, 因此會出現模糊和鋸齒.css

解決方案一：就是在canvas標籤中設置了width="200",height="200"以外, 還在外部的CSS樣式表中設置了該canvas的寬度爲100%，而後在畫圖時把canvas的的寬度設爲手機端的最大像素值, 由於如今的手機端寬度的最大的只有1080像素寬, 因此就把canvas的寬度和高度設爲200的6倍也就是1200像素, 按照這個像素畫完以後, width:100%又會把canvas的寬度和高度縮小至父元素的寬和寬那麼大, 所以整個canvas被縮小了, 大尺寸的canvas內容被縮小了以後確定不會產生鋸齒現象，解決的原理其實就是畫圖時候將canvas的寬和高放大必定的倍數，按照放大後的canvas寬和高畫圖，而後畫完以後再將canvas縮小爲目標寬和高，這樣解決的方法存在的問題是，在PC端反而鋸齒會更明白，只是移動端的效果很好，因此在pc端不須要放大倍數，實例以下：html

<!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各個瀏覽器的兼容性不是很好，這是惟一缺陷，實現方法以下：html5

<!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>