使用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. 使用Cygwin登录Raspberry PI

    偿试了很多ssh终端程序,像ScureCRT,Putty,SSHSecureShellClient,SSH Client Tunnelier,每个工具都有自己的特点,putty对中文的支持还算好的,其 ...

  2. 【LeetCode】234. Palindrome Linked List (2 solutions)

    Palindrome Linked List Given a singly linked list, determine if it is a palindrome. Follow up:Could ...

  3. apache配置中ProxyPassReverse指令的含义

    apache中的mod_proxy模块主要作用就是进行url的转发,即具有代理的功能.应用此功能,可以很方便的实现同tomcat等应用服务器的整合,甚者可以很方便的实现web集群的功能. 例如使用ap ...

  4. Zabbix触发器支持的函数说明

    原文出处:https://www.zabbix.com/documentation/2.0/manual/appendix/triggers/functions 译者: pengyao abschan ...

  5. ubuntu下制作u盘启动盘

    ubuntu12.04下成功制作了ubuntu13.10 U盘启动盘. 成功 ubuntu14.04下成功制作了centos.7 U盘启动盘.成功 1.安装u盘制作工具unetbootin sudo ...

  6. librbd 分析

    一.概述

  7. Android-- ArrayAdapter用法举例（转载）

    近期很多Android开发者来函表示对ArrayAdapter和BaseAdapter的区别不是很清楚,这里Android123简单说下他们的关系和用处,ArrayAdapter是从BaseAdapt ...

  8. 【Android】详解Android动画

    目录结构: contents structure [+] 补间动画 使用java代码实现Alpha.Rotate.Scale.Translate动画 通过xml文件实现Alpha.Rotate.Sca ...

  9. 如何利用 Visual Studio 自定义项目或工程模板(转载)

    在开发项目的时候,由其是商业性质的大型项目时,往往需要在每个代码文件上都加上一段关于版权.开发人员的信息,并且名称空间上都需要带有公司的标志.这个时候,是选择在开发的时候手动添加还是自动生成呢? 我们 ...

  10. 跟我学SharePoint 2013视频培训课程——怎样创建列表和列表项（7）

    课程简介 第7天,怎样在SharePoint 2013中创建列表和列表项 视频 SharePoint 2013 交流群 41032413