使用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. 开发 Swift 和 Objective-C 混编的 Framework

    来源:黄文臣 blog.csdn.net/hello_hwc/article/details/58320433 前言 为什么要写这样一篇文章,因为昨天和一个朋友讨论到Swift和Objective C ...

  2. 神奇的 Block

    本文不做Block的基本介绍和底层实现原理,有兴趣的同学直接戳这篇文章(http://www.jianshu.com/p/51d04b7639f1),写得灰常好,本文只在应用层面上带领读者进行思考,并 ...

  3. kafka负载均衡相关资料收集（一）

    key为null时Kafka会将消息发送给哪个分区? 当你编写kafka Producer时, 会生成KeyedMessage对象. 1 KeyedMessage<K, V> keyedM ...

  4. git学习笔记（一）—— git环境搭建

    一.简介 Git是目前世界上最先进的分布式版本控制系统(没有之一). 首先,分布式版本控制系统根本没有“中央服务器”,每个人的电脑上都是一个完整的版本库,这样,你工作的时候,就不需要联网了,因为版本库 ...

  5. 【Struts2】自定义拦截器interceptors

    下面给一张图片表示Struts2拦截器的处理流程. 通过这个流程图,我们可以看出一个完整的请求大概的过程为: 请求 -->filter 控制器 --> 拦截器 1/ 拦截器 2--> ...

  6. mysql 查询 根据时分秒取数据 比如 取 时间为 8点半的 dateformat 时间函数转换

     date_format(date,'%H') = 8 and date_format(date,'%i') = 30   SELECT * FROM `t_pda_trucklog` WHERE D ...

  7. aaronyang的百度地图API之LBS云 笔记[位置数据 geotable]

    位置数据表 geotable  DEMO下载 我们再创建一个 leverTerminal表 添加 手机价格,手机型号,手机唯一码,用户id 新建一个html页面,引入最新的jquery包,1.8.2以 ...

  8. java_selenium 开发环境搭建

    java selenium 开发环境搭建 很多同学问我java selenium的开发环境怎么搭建,在这里简要说明一下. 安装jdk 这个自己一定要会 下载IDE 对于初学者来说java IDE无疑是 ...

  9. 你应该知道的JAVA面试题

    你应该知道的JAVA面试题 经常面试一些候选人,整理了下我面试使用的题目,陆陆续续整理出来的题目很多,所以每次会抽一部分来问.答案会在后面的文章中逐渐发布出来. 基础题目 Java线程的状态 进程和线 ...

  10. django -- while time zone support is active

    一.先看报错: django 在处理datetime类型的的报错/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site ...