Question

我用帆布做了一个很小的例子，它可以在 JsFiddle 上找到：

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css">

    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #myCanvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    </style>
    </head>
    <body>
        <canvas id="myCanvas">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
        <script>

            var canvas = document.getElementById( "myCanvas" );
            var context = canvas.getContext( "2d" );

            context.id = "myContext";
            context.beginPath();
            context.arc( 95, 50, 40, 0, 2 * Math.PI );
            context.stroke();

            setTimeout( function() { 
                var rectWidth = 150;
                var rectHeight = 75;
                context.fillStyle = "blue";
                context.fillRect( rectWidth / -2, rectHeight / -2, rectWidth, rectHeight );
            }, 2000 );

        </script> 
    </body>
</html>

正如您所见，渲染结果的质量非常低：

enter image description here

所以，我想知道，如何使用 Canvas 以高质量绘制各种数字，我不想画小尺寸，我想画100％的尺寸页。

那么，也许我没有定义一些抗混叠滤波器或其他东西？

谢谢！

Answer 1

问题

在大多数情况下，我们应该避免使用CSS来设置画布大小。

画布的默认大小为300 x 150像素（位图）。如果您使用CSS设置大小，我们最终会缩放300 x 150像素，这意味着浏览器将开始插值并平滑图像，这就是为什么您最终会得到模糊的结果。

解决方案

从CSS规则中删除这些：

#myCanvas {
  /*width: 100%;
  height: 100%;*/
  display: block;
  }

并在JavaScript中设置大小如下：

var canvas = document.getElementById( "myCanvas" );

canvas.width = window.innerWidth;     // equals window dimension
canvas.height = window.innerHeight;

您当然可以设置所需的任何其他尺寸（以像素为单位）。如果你的目标是完整的窗口大小，你可能想要为画布'CSS定义位置（即固定或绝对）。

希望这有帮助。

Answer 2

高度和宽度需要在canvas标签的height和width属性上设置，而不是在CSS中设置。任何CSS大小的canvas元素只会拉伸画布，并且不会正确调整大小。

<canvas id="canvas" width="500px" height="500px">

看看我在我的网站上发布的这个项目：Creating an HTML5 Paint App

它包含一个功能，当浏览器窗口大小改变（您必须修改）时调整画布大小：

        this.onScreenSizeChanged = function (forceResize) {
        if (forceResize || (this.canvas.width != window.innerWidth /*|| 
                            this.canvas.height != window.innerHeight*/)) {

            var image = this.context.getImageData(0, 0,
                    this.canvas.width, this.canvas.height);

            this.canvas.width = (window.innerWidth);
            this.canvas.height = (window.innerHeight);

            this.context.putImageData(image, 0, 0);

        }
    }
    this.onScreenSizeChanged(true);

宽度和高度100％的帆布质量差

2 个答案:

问题

解决方案