How to solve the problem of blurry images drawn on Canvas?

Canvas is a new tag of HTML5. It is a canvas that can draw graphics. The default size of the canvas is 300x150. There are issues to pay attention to when customizing the size of the drawing canvas, which is when using styles to set the height and width For example,

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

is equivalent to stretching the entire canvas, and drawing like this The resulting graphics are blurry.

You can see that the edge of the circle is blurred and turned into an ellipse? This is because the canvas is still the default size of 300px wide and 150px high, but the canvas is forcibly stretched to 1000x600 using style. The width is expanded by 3.33 times and the height is expanded by 4 times, so it becomes an ellipse. Change the width to 1200 and it will be round.

So you cannot set the size in the style. You should use the width and height properties of the canvas to set the height. Look at the code below. Note that the parameters for drawing a circle have also changed

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

So to set the size of the canvas, use the width and height attributes that come with the canvas. It is the real size of the canvas. There are ways to solve it online, but I didn't try it because it seemed too troublesome. It would be better to just give it a fixed size in the future. Some people say how to customize it like this. It's easy. Just put a div and get the width in js or get the width and height of the screen and set the value of the canvas. code show as below.

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

The result is the same as the picture above, you can try it yourself.

Summary

##The width and height of the canvas must be written using the built-in width and height to determine the true canvas size, <canvas width="1000px" height="600px" style="background-color: #eee">Your browser does not support H5 canvas attributes</canvas><span style="font-size: 16px;"></span> , adaptive use js to set.

The above is the detailed content of How to solve the problem of blurry images drawn on Canvas?. For more information, please follow other related articles on the PHP Chinese website!