解决 canvas 在高清屏中绘制模糊的问题
主要代码部分:
<canvas id="my_canvas" width="540" heihgt="180"></canvas>
<script type="text/javascript">
// 获取像素比
var getPixelRatio = function (context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
//画文字
var myCanvas = document.getElementById("my_canvas");
var context = myCanvas.getContext("2d");
var ratio = getPixelRatio(context); myCanvas.style.width = myCanvas.width + 'px';
myCanvas.style.height = myCanvas.height + 'px'; myCanvas.width = myCanvas.width * ratio;
myCanvas.height = myCanvas.height * ratio; // 放大倍数
context.scale(ratio, ratio); context.font = "18px Georgia";
context.fillStyle = "#999";
context.fillText("我是清晰的文字", 50, 50);
</script>
参考文章: https://www.html.cn/archives/9297
解决 canvas 在高清屏中绘制模糊的问题的更多相关文章
- 【转】解决 canvas 在高清屏中绘制模糊的问题
来源: http://www.css88.com/archives/9297 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片 ...
- 【Canvas】311- 解决 canvas 在高清屏中绘制模糊的问题
点击上方"前端自习课"关注,学习起来~ 一.问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片一样 ...
- 解决 canvas 绘图在高清屏中的模糊问题
解决 canvas 绘图在高清屏中的模糊问题 为什么模糊 CSS 像素是一个抽象单位(1 px),浏览器根据某种规则将 css 像素转化为屏幕需要的实际像素值. 在高清屏之前,屏幕上显示一个像素点需要 ...
- ArcGIS 在高清屏中主界面界面字体和图标显示过小,如何解决?
作者:安日链接:https://www.zhihu.com/question/40658050/answer/132382971来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 高清屏下canvas重置尺寸引发的问题
我们知道,清空canvas画布内容有以下两个方法. 第一种方法是cearRect函数: context.cearRect(0,0,canvas.width,canvas.height) 第二种方法就是 ...
- Cocos2D瓦块地图高清屏(retina)显示比例问题的解决
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 在Cocos2D的游戏编程里,常用到瓦块地图.而cocos2D ...
- 移动端,多屏幕尺寸高清屏retina屏适配的解决方案
移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...
- Cocos2D iOS之旅:如何写一个敲地鼠游戏(一):高清屏显示和UIKit
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- 怎么在高清屏上画一条0.5px的边
怎么在高清屏上画一条0.5px的边呢?0.5px相当于高清屏物理像素的1px.这样的目的是在高清屏上看起来会更细一点,效果会更好一点,例如更细的分隔线. 理论上px的最小单位是1,但是会有几个特例,高 ...
随机推荐
- vmware14克隆后UUID相同的解决方法
查看网卡 UUID值 [root@localhost network-scripts]# nmcli connection showNAME UUID TYPE DEVICE ens33 cf228d ...
- 读取资源中的GIF文件相应像素宽高度
代码参考了如下网页的实现: https://www.cnblogs.com/zy791976083/p/9921069.html 整理成一个函数: BOOL GetResGifSize(long nR ...
- Java课堂笔记(三):抽象类和接口
在面向对象一文中,我们说了多态的一个功能是将“做什么”和“怎么做”分离开来,所采用的方法是将不同的具体实现放在不同的子类中,然后向接口中传入一个父类对象的引用.而本篇博客要说的内容则为接口(此处&qu ...
- Node.js实战9:用EventEmitter触发和响应事件。
Nodejs有一个重要的事件模块:EventEmitter. 它在Nodejs的内置及第三方模块中被大量使用,许多Nodejs项目的架构都是用它实现的. 可见,EventEmitter对于学习Node ...
- vue—两个数组,去重相同项
- (4.12)mysql备份还原——mysql逻辑备份之mysqldump
关键词:mysql逻辑备份介绍,mysqldump,mysqldump最佳实践 我的相关文章:https://www.cnblogs.com/gered/p/9721696.html 正文 1.mys ...
- xml与Properties的区别
1.properties配置文件,是一个属性对应于一个值(key = value)这样的键值匹对模式: 每一行properties配置文件的键值,对应着一次赋值: 特殊点: 在前后两行properti ...
- python基础循环语句练习
1.使用while循环输入 1 2 3 4 5 6 8 9 10 n = 1 while n < 11: if n == 7: pass else: print(n) n = n + 1 ...
- Python:库文件
可以引用的Python文件:自己写的.py + 外部库(external libraries)
- JAVA总结--分布式锁
1.概念 分布式锁出现的原因:单体应用单机部署环境下,为了解决多线程并发问题,我们会使用ReentrantLcok或synchronized来解决互斥问题:但业务的需求,单机部署演变成分布式系统后,在 ...