使用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>