使用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>
備注：以上兩種方法經初步測試只有在安卓紅米Note下的UC瀏覽器中不支持，原因在於安卓紅米Note下的UC瀏覽器中對於HTML5 canvas畫布是最大限制很小，不能超過256px ,超過畫布就顯示花屏，不能顯示繪制的圖，屬於安卓紅米Note下的UC瀏覽器對於canvas的兼容性不支持超過這個寬度的畫圖