使用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. linux shell 脚本攻略学习1

    1.关于echo和printf打印输出 如果要使用转义序列,那么需要在echo 后面加上参数 -e来进行识别,下面例子是进行对比: amosli@amosli-pc:~/learn$ echo -e ...

  2. 十五分钟介绍 Redis数据结构

    下面是一个对Redis官方文档<A fifteen minute introduction to Redis data types>一文的翻译,如其题目所言,此文目的在于让一个初学者能通过 ...

  3. Android权限详解

    在Android的设计中,资源的访问或者网络连接,要得到这些服务都需要声明其访问权限,否则将无法正常工作.在Android中这样的权限有很多种,这里ATAAW.COM将各类访问权限一一罗列出来,供大家 ...

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

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

  5. golang ----map按key排序

    实现map遍历有序 1. key有序 思路:对key排序,再遍历key输出value 代码如下:既可以从小到大排序,也可以从大到小排序 package main import ( "fmt& ...

  6. dart --- 更符合程序员编程习惯的javascript替代者

    dart是google在2011年推出的一门语言,提供较为丰富的lib,并支持将代码转变为javascript,其demo code 和 demo app 也是以web前端代码来展示的. 其语言特性较 ...

  7. pthread编译时报错的解决方法

    最近在学习POSIX thread编程,今天编译一个程序报如下错误: /tmp/ccXH8mJy.o:在函数‘main’中:deadlock.c:(.text+0xbb):对‘pthread_crea ...

  8. iphone5刷机教程

    如果不想麻烦可以在越狱之后添加源,cydia.china3gpp.com打ios7的补丁就可以了 机器为iphone5 美国sprint有锁版 1. 首先备份需要的程序和数据(把各种缓存的影片删掉再备 ...

  9. redis transactions(事务)

    MULTI MULTI:标记一个事务块的开始. 事务块内的多条命令会按照先后顺序被放进一个队列当中,最后由 EXEC 命令原子性(atomic)地执行. 可用版本:>= 1.2.0 时间复杂度: ...

  10. ubuntu 14.04安装mysql数据库

    1. apt-get install mysql-server mysql-client 输入root的密码: 确认root的密码: 2. 连接测试是否成功:mysql –hlocalhost –ur ...