Canvas绘制图片模糊该如何解决？

canvas是html5的新标签，是个可以绘制图形的画布，画布的默认大小为300x150。在自定义绘制画布大小的时候有注意的问题，就是用样式来设置高度和宽度的时候 比如

    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

他等于是把整个画布进行了拉伸，这样绘制出来的图形是模糊的。

可以看到圆的边缘是模糊的，而且变成了椭圆？这是因为画布还是默认的大小宽300px，高150px，但是用style强行把画布拉伸到了1000x600。宽度扩大3.33倍，高度扩大4倍，所以变成了椭圆。宽改为1200就是圆了。

所以不能在样式里面设置大小，应该用canvas自带的width和height属性来设置高度。看下面的代码。注意画圆的参数也改变了

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

所以设置画布的大小是用canvas自带的width和height属性，才是画布真正的大小，网上有方法可以解决，但是我没去试，因为感觉比较麻烦，还不如直接就是以后就是给固定的大小。有人说这样子自定义怎么办，那简单，套个div然后在js获取宽度或者获取屏幕的宽高然后设置canvas的值就好了。代码如下。

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

结果和上面的图是一样的，各位可以自己试一下。

总结

canvas的宽高要用自带的width和height来写才是真正的画布大小，<span style="font-size: 16px;">17a80cc1fd4e4aef2bcbf8646e33797c您的浏览器不支持H5画布属性c2caaf3fc160dd2513ce82f021917f8b</span>,自适应用js来设置。

以上是Canvas绘制图片模糊该如何解决？的详细内容。更多信息请关注PHP中文网其他相关文章！