Comment résoudre le problème des images floues dessinées sur Canvas ?

Canvas est une nouvelle balise HTML5. C'est un canevas qui peut dessiner des graphiques. La taille par défaut du canevas est de 300x150. Quelque chose à noter lors de la personnalisation de la taille de la toile de dessin est lors de l'utilisation de styles pour définir la hauteur et la largeur Par exemple,

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

équivaut à étirer la totalité de la toile. ainsi dessinés sont flous.

Vous voyez que le bord du cercle est flou et transformé en ellipse ? En effet, le canevas a toujours la taille par défaut de 300 px de large et 150 px de haut, mais le canevas est étiré de force à 1 000 x 600 à l'aide du style. La largeur est agrandie de 3,33 fois et la hauteur est agrandie de 4 fois, cela devient donc une ellipse. Changez la largeur à 1200 et elle sera ronde.

Vous ne pouvez donc pas définir la taille dans le style. Vous devez utiliser les attributs de largeur et de hauteur fournis avec le canevas pour définir la hauteur. Regardez le code ci-dessous. Notez que les paramètres pour dessiner un cercle ont également changé

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

Donc pour définir la taille de la toile, utilisez la largeur et les attributs de hauteur fournis avec le canevas sont la taille réelle du canevas. Il existe des moyens de le résoudre en ligne, mais je ne l'ai pas essayé car cela semblait trop gênant. Il serait préférable de lui donner simplement une taille fixe. à l'avenir. Certaines personnes disent comment le personnaliser comme ceci. C'est simple. Il suffit de mettre un div et d'obtenir la largeur en js ou d'obtenir la largeur et la hauteur de l'écran et de définir la valeur du canevas. Le code est le suivant.

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

Le résultat est le même que la photo ci-dessus, vous pouvez l'essayer vous-même.

Résumé

La largeur et la hauteur de la toile doivent être écrites en utilisant la largeur et la hauteur intégrées pour déterminer la véritable taille de la toile, <code><span style="font-size: 16px;"><canvas width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas></span>Votre navigateur ne prend pas en charge les attributs de canevas H5 , Les paramètres adaptatifs sont effectués avec js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!