canvas 画图移动端出现锯齿毛边的解决方法

2023-12-03 09:32

本文主要是介绍canvas 画图移动端出现锯齿毛边的解决方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近项目中用的canvas 越来越多,但是之前都是在canvas 上画图片,
最近这次是做一个折线图,自己画出来以后发现有锯齿,百度一番后找到了解决办法,记录到博客里。

声明一下,我用的是第二种方法,第一种方法,看代码原理没问题,也就整理过来了

使用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>

如果是用jquery 的话,要把jquery 对象转换成dom 对象!比如
var canvas = $(“#mycanvas”);
canvas[0].style.width = width + ‘px’;

如果用 canvas.width(width+’px’);
这种方法不行,因为jq 获取的元素是一个集合, 必须要用 [0] 才能拿到dom 元素

这篇关于canvas 画图移动端出现锯齿毛边的解决方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/448952

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Windows 上如果忘记了 MySQL 密码 重置密码的两种方法

《Windows上如果忘记了MySQL密码重置密码的两种方法》:本文主要介绍Windows上如果忘记了MySQL密码重置密码的两种方法,本文通过两种方法结合实例代码给大家介绍的非常详细,感... 目录方法 1:以跳过权限验证模式启动 mysql 并重置密码方法 2:使用 my.ini 文件的临时配置在 Wi

MySQL重复数据处理的七种高效方法

《MySQL重复数据处理的七种高效方法》你是不是也曾遇到过这样的烦恼:明明系统测试时一切正常,上线后却频频出现重复数据,大批量导数据时,总有那么几条不听话的记录导致整个事务莫名回滚,今天,我就跟大家分... 目录1. 重复数据插入问题分析1.1 问题本质1.2 常见场景图2. 基础解决方案:使用异常捕获3.

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

SQL中redo log 刷⼊磁盘的常见方法

《SQL中redolog刷⼊磁盘的常见方法》本文主要介绍了SQL中redolog刷⼊磁盘的常见方法,将redolog刷入磁盘的方法确保了数据的持久性和一致性,下面就来具体介绍一下,感兴趣的可以了解... 目录Redo Log 刷入磁盘的方法Redo Log 刷入磁盘的过程代码示例(伪代码)在数据库系统中,r

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)