Schlechte Qualität für 100% sowohl Breite als auch Höhe der Leinwand

Question

Feb 06, 2014, 09:20 AM

Schlechte Qualität für 100% sowohl Breite als auch Höhe der Leinwand

Ich habe ein sehr kleines Beispiel mit Canvas gemacht, es ist auf verfügbarJsFiddle:

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

Wie Sie sehen können, weist das Rendering-Ergebnis eine sehr niedrige Qualität auf:

Also frage ich mich, wie ich mit verschiedenen Figuren zeichnen kannSegeltuch In guter Qualität möchte ich nicht klein zeichnen, ich möchte 100% der Seitengröße zeichnen.

Vielleicht habe ich keinen Anti-Aliasing-Filter oder etwas anderes definiert?

Vielen Dank!