zoukankan      html  css  js  c++  java
  • 解决 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

  • 相关阅读:
    [USACO 5.5]Hidden Password
    [Codeforces 1016F]Road Projects
    再会,OI
    [TJOI 2018]智力竞赛
    [POI 2009]Lyz
    [NOI 2015]品酒大会
    [NOI 2017]蔬菜
    [NOI 2017]整数
    [NOI 2017]游戏
    [NOI 2017]蚯蚓排队
  • 原文地址:https://www.cnblogs.com/rachelch/p/11237546.html
Copyright © 2011-2022 走看看