当一个画布被放置在另一个画布上时，文本会变得模糊

blurred text when a canvas is placed on top of another canvas

本文关键字：文本 模糊 另一个 一个      更新时间：2023-09-26

我想在鼠标移动时显示鼠标在画布上的x位置。谁能告诉我为什么文字这么大，这么模糊，还有有没有办法实现这两个画布之间的透明度

<body style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
  <canvas id="myCanvas" style="display: block; height: 100%; width: 100%;">
            Your browser does not support the HTML5 canvas tag.</canvas>  <canvas id="temp">
            Your browser does not support the HTML5 canvas tag.</canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var hgap = 0;
        var vgap = 0;
        var rows, cols;
        var annotation_x = 1;
        var row = 0; var col = 0;
        //ctx.font = "14px Arial";
        var t = document.getElementById("temp");
        tctx = t.getContext("2d");
        // tctx.lineWidth = 10;
        tctx.lineJoin = 'round';
        tctx.lineCap = 'round';
        tctx.strokStyle = 'red';

        var mouse = { x: 0, y: 0 };
        c.addEventListener('mousemove', function (evt) {
        //    tctx.clearRect(0, 0, c.width, c.height);
            ctx.clearRect(0, 0, c.width, c.height);
            mouse.x = evt.pageX;
            mouse.y = evt.pageY;
            ctx.fillText(mouse.x, 10, 10);
        }, false);

    </script>
</body>

问题不是由于有两个画布。

问题是你使用CSS缩放画布，但你不修改它的像素数(height和width属性)。然后，结果是模糊的。

如果你不使用CSS缩放它，结果很好:Demo

或者，您可以尝试使用image-rendering CSS属性(例如crisp-edges, demo)

您也可以修改height和width属性时，浏览器的大小调整(resize事件)，并重新绘制画布。

<canvas id="myCanvas" style="display: block; height: 100%; width: 100%;">

^你不应该用CSS缩放画布元素，除非你想让它的内容被插值。考虑一个300x125px的图像，你已经缩放到浏览器窗口的宽度和高度-图像将变得模糊。

如果你想有一个全屏画布，你需要用JS缩放它:

var c = document.getElementById("myCanvas");
c.width = window.innerWidth;
c.height = window.innerHeight;

. .或HTML:

<canvas width="1920" height="1080"></canvas>
相关文章：