使用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. iphone3g 蜂窝数据有效设置

    iphone3g 蜂窝数据有效设置 蜂窝数据     APN cmnet/空     用户名 空     A密码 空彩信(默认为空,需要控制的话,可以设置)     APN cmwap/空     用 ...

  2. Ubuntu菜鸟入门（十一）—— windows 和 ubuntu时间冲突解决

    一.问题原由 Ubuntu和Windows默认的时间管理方式不同,所以双系统发生时间错乱是正常的 Ubuntu默认时间是把BIOS时间当成GMT+0时间,也就是世界标准时,而我国在东八区(GMT+8) ...

  3. 【Struts2】Struts2与Spring整合后，如何指定Action为多例模式

    Strust2默认是多例的,但是Spring默认是单例的,在进行Spring+Strust2整合的时候,就需要把Spring管理的action指定为多例模式,只需要在action上面加上@Scope( ...

  4. MySQL安装Altas

    准备工作:需要先把MySQL主从配置好. 0.下载altas:打开https://github.com/Qihoo360/Atlas/releases wget https://github.com/ ...

  5. 《JAVA与模式》之访问者模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述访问者(Visitor)模式的: 访问者模式是对象的行为模式.访问者模式的目的是封装一些施加于某种数据结构元素之上的操作.一旦这些操作需要 ...

  6. easyui textbox combobox 设置只读不可编辑状态

    输入框 textbox $("#xx").textbox('setValue','value');  //设置输入框的值 $('#xx').textbox('textbox').a ...

  7. 解决虚拟机vmware虚拟机安装64位系统“此主机支持 Intel VT-x，但 Intel VT-x 处于禁用状态”的问题

    前言 虚拟机使用的是VMware Workstation,并且首次在虚拟机体验64 位系统.在新建好虚拟机,运行时候就出现了VMware Workstation 的提醒:此主机支持 Intel VT- ...

  8. systemd的程序自启动脚本编写

    以FreeSWITCH的自启动脚本为例. 一. 编写freeswitch.service文件 [Unit] Description=FreeSWITCH After=syslog.target net ...

  9. 一个将java事物的非常好的栗子

    地址:http://www.cnblogs.com/davenkin/archive/2013/02/16/java-tranaction-1.html

  10. SpringMVC之RequestContextHolder分析

    最近遇到的问题是在service获取request和response,正常来说在service层是没有request的,然而直接从controlller传过来的话解决方法太粗暴,后来发现了Spring ...