Question

Chrome和Firefox在100％渲染时处理以下代码。

<!DOCTYPE html>
<html>
    <head>
        <script type="application/x-javascript">
            function draw() {
                var canvas = document.getElementById("canvas");
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");
                    ctx.beginPath();
                    ctx.arc(50,50,25,0,2*Math.PI);
                    ctx.stroke();
                }
            }
        </script>
    </head>
    <body onload="draw();">
        <canvas id="canvas" width="100" height="100">
            <p>This example requires a browser that supports the
                <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
                &lt;canvas&gt; feature.</p>
        </canvas>
    </body>
</html>

但如果有人放大了我的页面，那么画布就会被采样，而不是重新绘制。它只有150％的丑陋，但当观众达到300％时，它看起来会非常难看：

enter image description here

如何重写上面的代码，以便在新的放大倍率下重新绘制圆圈，而不是重新采样？

这answer让我相信它可以轻松完成。我的尝试

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                width:  100%;
                height: 100%;
                margin: 0px;
            }
        </style>

        <script type="application/x-javascript">
            function draw() {
                var canvas = document.getElementById("canvas");
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");

                    ctx.canvas.width  = window.innerWidth;
                    ctx.canvas.height = window.innerHeight;

                    ctx.beginPath();
                    ctx.arc(ctx.canvas.width/2, ctx.canvas.height/2,
                            ctx.canvas.height/4,0,2*Math.PI);
                    ctx.stroke();
                }
            }
        </script>
    </head>
    <body onload="draw();">
        <canvas id="canvas">
            <p>This example requires a browser that supports the
                <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
                &lt;canvas&gt; feature.</p>
        </canvas>
    </body>
</html>

不好。当用户放大时，圆圈仍会重新采样。你能做得更好吗？

（Chrome和Firefox在放大时表现不同。我的目标是让圆圈保持中心位于画布中间，半径为窗口高度的四分之一。）

Answer 1

尝试将onload与window resize事件结合使用以重绘画布（缩放会触发resize事件）：

window.addEventListener('resize', draw);

CANVAS REDRAWING

示例：http://jsfiddle.net/ksvyndwp/

＆＃13;

function draw() {
                var canvas = document.getElementById("canvas");
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");

                    ctx.canvas.width  = window.innerWidth;
                    ctx.canvas.height = window.innerHeight;

                    ctx.beginPath();
                    ctx.arc(ctx.canvas.width/2, ctx.canvas.height/2,
                            ctx.canvas.height/4,0,2*Math.PI);
                    ctx.stroke();
                }
            }

draw();
window.addEventListener('resize', draw);

＆＃13;

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

＆＃13;

<canvas id="canvas">
            <p>This example requires a browser that supports the
                <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
                &lt;canvas&gt; feature.</p>
        </canvas>

＆＃13;

如果你仍然担心更高缩放级别的像素化，我担心你在画布上没有任何关于它的事情，因为画布＆＃39;像素与窗口缩放，虽然您进入了子像素渲染阶段，但您无法做任何事情来使其看起来更好。

CSS SCALING

但是，如果您不想在画布内完全执行此操作，则可以执行简单的CSS转换，使您的圆圈在所有缩放级别上都能正确显示。将宽度和高度设置为100％将使画布（如在画布中，DOM元素;而不是实际的canvas.width和canvas.height）保持窗口的大小，因此它基本上是＆＃34;免疫＆＃34;缩放。

在这里看到它（实际上在缩放jsfiddle：http://jsfiddle.net/406h7xm0/时比Stack Overflow iframe更好）：

＆＃13;

function draw() {
                var canvas = document.getElementById("canvas");
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");

                    ctx.canvas.width  = window.innerWidth;
                    ctx.canvas.height = window.innerHeight;

                    ctx.beginPath();
                    ctx.arc(ctx.canvas.width/2, ctx.canvas.height/2,
                            ctx.canvas.height/4,0,2*Math.PI);
                    ctx.stroke();
                }
  console.log(window.innerWidth);
            }

draw();

＆＃13;

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

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

您尝试做的最终解决方案可能介于我向您展示的两种方法之间。

如何重新渲染（而非重新取样）画布？

1 个答案:

CANVAS REDRAWING

CSS SCALING