Question

我想在鼠标移动时在画布上显示鼠标的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>

Answer 1

问题不在于有两个画布。

问题是您使用CSS缩放画布，但不修改其像素数（height和width属性）。然后，结果很模糊。

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

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

您还可以在调整浏览器大小（resize事件）时修改height和width属性，并重绘画布。

Answer 2

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

^您不应该使用CSS缩放canvas元素，除非您希望对其内容进行插值。考虑一个300x125像素的图像，您可以将其缩放到浏览器窗口的宽度和高度 - 图像将变得模糊。

如果您希望使用全屏画布，则需要使用JS进行缩放：

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

..或HTML：

<canvas width="1920" height="1080"></canvas>

当画布放在另一个画布上时，文本模糊

2 个答案: