使用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的兼容性不支持超过这个宽度的画图

html5 canvas 画图移动端出现锯齿毛边的解决方法的更多相关文章

  1. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  2. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  3. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  4. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  5. HTML5 Canvas 画图组件 All In One

    HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...

  6. Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

    同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...

  7. canvas.toDataURL 由于跨域报错的解决方法

    关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...

  8. 玩转html5<canvas>画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  9. html5 canvas画图之图形随拖动而复制（有操作指示）

    学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. hihocoder216周：贪心或二分

    题目链接 有N条线段,要切K刀,使得最长的线段尽量短.在最佳切割的条件下,切完之后最长的那根绳子是多长. 方法一:贪心 每次切的那一刀必然是最长的那条线段,用优先队列,每次往最长的那条线段上切一刀 方 ...

  2. log4delphi使用(转)

    转自:http://blog.csdn.net/brightgems/article/details/814042 Log4d是apache下的一个delphi开源子项目,它的设计思想来源于Log4j ...

  3. python中对两个 list 求交集，并集和差集

    python中对两个 list 求交集,并集和差集: 1.首先是较为浅白的做法: >>> a=[1,2,3,4,5,6,7,8,9,10] >>> b=[1,2,3 ...

  4. jquery 滑动取值

    JavaScript 滑动条效果 jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示

  5. win7系统部分软件显示乱码怎么办

    用了Win7以后,发现有的中文软件打开后,在界面上出现很多文字乱码,之前这个软件在XP上用过,一直都是中文的,怎么到Win7上,就显示乱码了. 到网上一查,发现很多网友都有同样问题,经过一番查找,找到 ...

  6. IntelliJ IDEA 缺少 javax 包 支持

    在初次使用 IntelliJ IDEA 中,当你使用javax.servlet包下的类时(例:javax.servlet.http.HttpServlet), 在你会发现在IntelliJ IDEA里 ...

  7. iOS 修改UITabBar的默认点击行为

    项目截图 当我接到如上图这个需求的时候,评估了一下.感觉如上图的效果用自定义UITabBar的方式就可以实现了(做法类似新浪微博的自定义UITabBar中的不规则按钮),没错,就是干.一番折腾之后,我 ...

  8. macOS SIP 权限设置

    1.macOS SIP 权限设置 对于 macOS 10.11+ 用户,由于系统启用了 SIP(System Integrity Protection), 导致 root 用户也没有权限修改 /usr ...

  9. Oracle 12C -- 在相同的列的集合上创建多个索引

    在12C中,可以在相同的列的集合上创建多个索引,但是多个索引的类型要不同.同一时刻,只有一个是可见的. SQL> create table emp_tab as select * from em ...

  10. 【转】Lisp 已死，Lisp 万岁！

    Lisp 已死,Lisp 万岁! 有一句古话,叫做“国王已死,国王万岁!”它的意思是,老国王已经死去,国王的儿子现在继位.这句话的幽默,就在于这两个“国王”其实指的不是同一个人,而你咋一看还以为它自相 ...