关于canvas绘制模糊问题的解决方法


Posted in HTML / CSS onSeptember 24, 2019

模糊原因

首先,需要理解canvas的展示机制。

<canvas id="map" width="375" height="667"></canvas>

我绘制了一张375px的canvas,iphone6的宽度也是375px,ok,canvas铺满了整个屏幕。

那么canvas的大小就是375px,canvas类似于图片,一张375px的图片,我们就把它当做是图片来看就好了。我,尖沙咀段坤说的。

如果遇到了屏幕宽度400px的手机,那么图片会 拉伸,canvas也会拉伸,拉伸则必然会模糊。

那么iphone6确实是375px宽度的手机,还是会出现模糊问题,为什么呢?手机端会存在高清屏的问题。也就是我们说的2倍屏或者3倍屏,也叫作屏幕的DPI。高清屏在绘制界面时,会把2px的宽度渲染成1px,也就达到了高清的效果。也就是说,我们在高清屏下看到的375px其实是750个像素点绘制出来的,canvas其实是375px被拉伸到了750px再展示出来的,拉伸则必然会模糊。

好了,模糊的原因知道了,其实就是高清屏所带来的麻烦,怎么解决呢?

解决方法

如果是2倍屏,我们把设计图上375px的canvas画成750px不就解决了?

设置canvas样式

这里我们不写width和height,而直接写style。把它看成是图片,我们先不管图片原宽高是多少,不管拉伸还是压缩,直接让他铺满整个屏幕。style里写的宽高不是图片的原宽高,也就是style里写的宽高并不是canvas的真实宽高

<canvas id="map" style="width: 375px;height:330px;"></canvas>

设置canvas宽高

上面的style并不是canvas的真实宽高,那么我们如何设置它的宽高呢?

普通屏,2倍屏,3倍屏如果分别适配?

<canvas id="map" style="width: 375px;height:330px;"></canvas>

<script>
let canvas = document.querySelector('#map');
// 获取到屏幕倒是是几倍屏。
let getPixelRatio = function(context) {
  var backingStore = context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
   return (window.devicePixelRatio || 1) / backingStore;
};
 // iphone6下得到是2 
const pixelRatio = getPixelRatio(canvas);
// 设置canvas的真实宽高
canvas.width = pixelRatio * canvas.offsetWidth; // 想当于 2 * 375 = 750 
canvas.height = pixelRatio * canvas.offsetHeight;
</script>

那么canvas的宽高就变成了下图这样,750宽度的canvas,如果你是2倍屏我就刚好能够适应!!!

关于canvas绘制模糊问题的解决方法

设置后的宽高

开始画点

比如,375的设计图上,有一个半径为2px的圆点,点的位置是x:100,y:100。

那么我们现在canvas的宽度是750,宽高变成了之前的2倍。为了视觉上位置保持不变,我们画点的位置就应该是x:100*pixelRatio,y:100*pixelRatio。

完整代码如下:

<canvas id="map" style="width: 375px;height:330px;"></canvas>

<script>
let canvas = document.querySelector('#map');
// 获取到屏幕倒是是几倍屏。
let getPixelRatio = function(context) {
  var backingStore = context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
   return (window.devicePixelRatio || 1) / backingStore;
};
 // iphone6下得到是2 
const pixelRatio = getPixelRatio(canvas);
// 设置canvas的真实宽高
canvas.width = pixelRatio * canvas.offsetWidth; // 想当于 2 * 375 = 750 
canvas.height = pixelRatio * canvas.offsetHeight;

// 开始画点
let ctx = canvas.getContext("2d");
ctx.beginPath();
 // 375设计图上的位置和尺寸都应该*pixelRatio 因为我们现在的canvas是750
ctx.arc(100*pixelRatio, 100*pixelRatio, 2*pixelRatio, 0, 2 * Math.PI);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();

// ...你的其他代码
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 background属性调整增强介绍
Dec 18 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 #HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 #HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 #HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 #HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 #HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 #HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 #HTML / CSS
You might like
php常用数学函数汇总
2014/11/21 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
layUI的验证码功能及校验实例
2019/10/25 Javascript
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python3爬取各类天气信息
2018/02/24 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python jieba库分词模式实例用法
2021/01/13 Python
浅析python连接数据库的重要事项
2021/02/22 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
汽车销售经理岗位职责
2014/06/09 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Python超详细分步解析随机漫步
2022/03/17 Python