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,

    ef029a31833e82074e2841e311304802
        c1f09087ca97c8236460a3898c8e270c您的浏览器不支持H5画布属性c2caaf3fc160dd2513ce82f021917f8b
    8019067d09615e43c7904885b5246f0a
        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();
    2cacc6d41bbb37262a98f745aa00fbf0
16b28748ea4df4d9c2150843fecfba68

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

ef029a31833e82074e2841e311304802
    2f793f625f21a6d6ac9a0eacb892e6e3您的浏览器不支持H5画布属性c2caaf3fc160dd2513ce82f021917f8b
    8019067d09615e43c7904885b5246f0a
        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();

    2cacc6d41bbb37262a98f745aa00fbf0
16b28748ea4df4d9c2150843fecfba68

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, 0a52655501c0e2ea1b8ec6d5f627b136Your browser does not support H5 canvas attributesc2caaf3fc160dd2513ce82f021917f8b<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!