Javascript 将画布放置在另一个画布上时文本模糊_Javascript_Jquery_Html_Canvas

Javascript 将画布放置在另一个画布上时文本模糊

javascript jquery html canvas

Javascript 将画布放置在另一个画布上时文本模糊,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我想在鼠标移动时在画布上显示鼠标的x位置。有人能告诉我为什么这两张画布上的文字如此大而模糊，还有什么方法可以达到这两张画布之间的透明度 <body style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;"> <canvas id="myCanvas" style="display: block; height: 100%; width: 100%;">

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


您的浏览器不支持HTML5画布标记。
您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var-hgap=0；
var vgap=0；
var行，cols；
var注释_x=1；
var行=0；var-col=0；
//ctx.font=“14px Arial”；
var t=document.getElementById（“临时”）；
tctx=t.getContext（“2d”）；
//tctx.lineWidth=10；
tctx.lineJoin='round'；
tctx.lineCap=‘圆形’；
tctx.strokStyle='红色'；
变量鼠标={x:0，y:0}；
c、 addEventListener（'mousemove'，函数（evt）{
//tctx.clearRect（0，0，c.宽度，c.高度）；
ctx.clearRect（0，0，c.宽度，c.高度）；
mouse.x=evt.pageX；
mouse.y=evt.pageY；
填充文本（mouse.x，10，10）；
}，假）；

问题不是因为有两个画布

问题是您使用CSS缩放画布，但不修改其像素数（

height

和

width

属性）。然后，结果是模糊的

如果不使用CSS进行缩放，结果很好：

或者，您可以尝试使用CSS属性（例如，

脆边

，）

调整浏览器大小（事件）时，您还可以修改

高度

和

宽度

属性，并重新绘制画布。