Canvas绘制图片模糊

最新推荐文章于 2024-08-06 10:12:26 发布

CLtomoya

最新推荐文章于 2024-08-06 10:12:26 发布

阅读量1k

点赞数

分类专栏： H5 文章标签： canvas 图片 html5

本文链接：https://blog.csdn.net/CLtomoya/article/details/74842740

版权

HTML5的Canvas元素在自定义尺寸时，如果通过样式设置宽高会导致图形模糊。正确做法是使用canvas的width和height属性设定真实画布大小，以保持图形清晰。不要用CSS拉伸画布，否则会破坏图形比例。通过JavaScript动态获取尺寸并设置canvas的width和height，可以实现响应式布局。

摘要由CSDN通过智能技术生成

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

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

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