关于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实现质感细腻丝滑按钮
Mar 09 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
background-position百分比原理详解
May 08 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
深入了解php4(2)--重访过去
2006/10/09 PHP
php查询whois信息的方法
2015/06/08 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
群众路线党员自我评议范文2014
2014/09/24 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书