Wie kann das Problem verschwommener Bilder auf Leinwand gelöst werden?

Canvas ist ein neues Tag von HTML5. Es handelt sich um eine Leinwand, die Grafiken zeichnen kann. Die Standardgröße der Leinwand beträgt 300 x 150. Beim Anpassen der Größe der Zeichenfläche ist Folgendes zu beachten: Beim Verwenden von Stilen zum Festlegen der Höhe und Breite entspricht

    <div style="width:1000px; height: 600px; " id="canvas_size">
        <canvas id="canvas" style="width: 100%; height: 100%; background-color: #eee">您的浏览器不支持H5画布属性</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.arc(120, 75, 20, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();
    </script>
</div>

dem Strecken der gesamten Leinwand Auf diese Weise gezeichnete Bilder sind verschwommen.

Sie können sehen, dass der Rand des Kreises verschwommen und in eine Ellipse verwandelt ist? Dies liegt daran, dass die Leinwand immer noch die Standardgröße von 300 Pixel Breite und 150 Pixel Höhe hat, die Leinwand jedoch mithilfe von Stil zwangsweise auf 1000 x 600 gestreckt wird. Die Breite wird um das 3,33-fache und die Höhe um das 4-fache vergrößert, sodass eine Ellipse entsteht. Ändern Sie die Breite auf 1200 und es wird rund sein.

Sie können die Größe also nicht im Stil festlegen. Sie sollten die Breiten- und Höheneigenschaften der Leinwand verwenden, um die Höhe festzulegen. Schauen Sie sich den Code unten an. Beachten Sie, dass sich auch die Parameter zum Zeichnen eines Kreises geändert haben

<div style="width:1000px; height: 600px; " id="canvas_size">
    <canvas id="canvas" width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.arc(500, 300, 200, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();

    </script>
</div>

Um die Größe der Leinwand festzulegen, verwenden Sie also die Breite und Höhenattribute, die mit der Leinwand geliefert werden, ist die tatsächliche Größe der Leinwand. Es gibt Möglichkeiten, es online zu lösen, aber ich habe es nicht ausprobiert, weil es mir zu mühsam erschien, ihm einfach eine feste Größe zu geben in der Zukunft. Einige Leute sagen, dass es einfach ist, ein Div einzugeben und die Breite in js zu ermitteln, oder die Breite und Höhe des Bildschirms zu ermitteln und den Wert der Leinwand festzulegen. Der Code lautet wie folgt.

<div style="width:1000px; height: 600px; " id="canvas_size"><canvas id="canvas" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas>        <script type="text/javascript">var canvas = document.getElementById("canvas");var canvas_size = document.getElementById("canvas_size");//获取divvar ctx = canvas.getContext("2d");canvas.width = canvas_size.offsetWidth;//设置宽canvas.height = canvas_size.offsetHeight;//设置高ctx.arc(500, 300, 200, 0, Math.PI * 2, false);ctx.fillStyle = "#000";ctx.fill();</script>    </div>

Das Ergebnis ist das gleiche wie auf dem Bild oben, Sie können es selbst ausprobieren.

Zusammenfassung

Die Breite und Höhe der Leinwand muss unter Verwendung der integrierten Breite und Höhe geschrieben werden, um die tatsächliche Leinwandgröße zu bestimmen, <code><span style="font-size: 16px;"><canvas width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas></span>Ihr Browser unterstützt keine H5-Canvas-Attribute , Adaptive Einstellungen werden mit js vorgenommen.

Das obige ist der detaillierte Inhalt vonWie kann das Problem verschwommener Bilder auf Leinwand gelöst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!