解决 canvas 在高清屏中绘制模糊的问题

解决 canvas 在高清屏中绘制模糊的问题

输入图片说明

1 解决方案 浏览器的对象 window 只有一个 属性是devicePixeRatio 的属性 。该属性表示了屏幕的设备像素比,即用几个像素宽度渲染一个像素的问题 举例子来说。 假设devicePixelRatio 的值为2 一张100/100 大小的图片 在Retina设备上 会用2个像素的空间。相当于图片放大了一倍,图片就会模糊 类似的,在 canvas context 中也存在一个 backingStorePixelRatio 的属性,该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。 backingStorePixelRatio 属性在各浏览器厂商的获取方式不一样,所以需要加上浏览器前缀来实现兼容。 2 解决问题 【直接上代码】

<style>
      canvas {
        border: 1px solid red;
        width: 100%;
    }
  </style>
<body>
 <canvas id="canvas"  height="180"></canvas>
</body>
1> 模糊的情况
  // 原始做法
   var canvas =  document.getElementById("canvas");
   var ctx = canvas.getContext('2d');
   ctx.font = '18px Geprgia';
   ctx.fillStyle  = '#999';
   ctx.fillText('我是模糊的文字',50,50); 

      2> 清晰的情况
     // 获取像素比
   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);

转载于:https://my.oschina.net/u/3692906/blog/1818628

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101646.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PyCharm2021安装教程

    PyCharm2021安装教程Windows安装pycharm教程新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入下载安装PyCharm1、进入官网PyCharm的下载地址:http://www.jetbrains.com/pycharm/downl

  • windows下tomcat配置环境变量相关注意事项

    windows下tomcat配置环境变量相关注意事项tomcat在windows10下环境配置需要注意的问题

  • 用C++实现五子棋人机对战小游戏

    用C++实现五子棋人机对战小游戏如何用C++实现五子棋小游戏呢?五子棋可谓是家喻户晓了,在科技如此发达的今天,我们能不能用电脑实现五子棋人机对弈呢?答案当然是可以的首先,思考一下我们需要完成哪些步骤1、打印棋盘(使用二维数组即可)2、判断胜负(可以考虑深搜,但是暴力似乎能让代码更简洁)3、思考下一部棋该怎么走先从最简单的一部开始:打印棋盘voidout(){for(inti=0;i<=24;i++){for(intj=0;j<=24;j++){if(

  • OutOfMemory及其解决方法「建议收藏」

    一、内存溢出类型1、java.lang.OutOfMemoryError:PermGenspaceJVM管理两种类型的内存,堆和非堆。堆是给开发人员用的上面说的就是,是在JVM启动时创建;非堆是留给JVM自己用的,用来存放类的信息的。它和堆不同,运行期内GC不会释放空间。如果webapp用了大量的第三方jar或者应用有太多的class文件而恰好MaxPermSize设置较小,

  • 详解舵机的基本原理以及控制方法「建议收藏」

    详解舵机的基本原理以及控制方法「建议收藏」文章目录什么是舵机?伺服控制硬件连接舵机规格SG90MG90SMG996R总结什么是舵机?舵机是伺服电机的一种,伺服电机就是带有反馈环节的电机,我们可以通过伺服电机进行精确的位置控制或者输出较高的扭矩;舵机也叫也叫RC伺服器,通常用于机器人项目,也可以在遥控汽车,飞机等航模中找到它们。类似舵机这样的伺服系统通常由小型电动机,电位计,嵌入式控制系统和变速箱组成。电机输出轴的位置由内部电位计不断采样测量,并与微控制器(例如STM32,Arduino)设置的目标位置进行比较;根据相应的偏差,控制

  • 服务器winsxs文件夹怎么清理工具,win7如何使用WinSxS工具安全删除WinSxS文件夹垃圾…

    服务器winsxs文件夹怎么清理工具,win7如何使用WinSxS工具安全删除WinSxS文件夹垃圾…我们都知道WinSxS是系统文件Windows目录下一个非常重要的文件夹,WinSxS文件夹里边有很多重要的组件,这些文件能够保证Windows7系统正常运行,所以WinSxS文件夹里面的文件是不可以随便删除的。但WinSxS文件夹占用的空间较大,影响win7运行速度,有什么方法可以安全删除一些无用的垃圾?我们可以使用WinSxS工具安全删除WinSxS文件夹垃圾,但是大家在删除文件过程中要小心,…

    2022年10月24日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号