javascript - 当一个 Canvas 放置在另一个 Canvas 之上时文本模糊

我想随着鼠标移动在 Canvas 上显示鼠标的 x 位置。有人可以告诉为什么文本如此大和模糊吗？还有什么方法可以实现这两个 Canvas 之间的透明度

<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>

最佳答案

问题不是因为有两个 Canvas 。

问题是您使用 CSS 缩放 Canvas ，但没有修改其像素数(height 和 width 属性)。然后，结果是模糊的。

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

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

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

关于javascript - 当一个 Canvas 放置在另一个 Canvas 之上时文本模糊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23958110/