JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<canvas id="my_canvas" width="540" heihgt="180"></canvas>

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);
		
		console.log(context.backingStorePixelRatio)
 
    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);