使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题
出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像素的手机上显示时, 这个canvas的内容其实是经过拉伸的, 所以会出现模糊和锯齿.
解决方案一：就是在canvas标签中设置了width="200",height="200"之外, 还在外部的CSS样式表中设置了该canvas的宽度为100%，然后在画图时把canvas的的宽度设为手机端的最大像素值, 因为现在的手机端宽度的最大的只有1080像素宽, 所以就把canvas的宽度和高度设为200的6倍也就是1200像素, 按照这个像素画完之后, 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=" 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>