html5 - 为什么canvas 绘制出来的图像是模糊的,是什么原因造成的?
大家讲道理
大家讲道理 2017-04-17 13:15:41
[HTML讨论组]




test Html5
    


    

你的浏览器不支持canvas!!!

设置 context.lineWidth = 1也没用,默认的宽度是2px,

为什么绘制出来的图形是模糊的?刚刚接触canvas,求指教?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(2)
巴扎黑

canvas 样式的宽高和属性的宽高是不一样的,样式的宽高就是实际显示在页面的像素宽高,属性的宽高是context的环境宽高,样式宽高和属性宽高默认都是300 150,你现在改了它的样式宽高为100% 600px,相当于把context环境内的300 150画在了现实中的100% 600px里,所以就模糊了,所以一般都要保持样式的宽高和属性的宽高一致。
eg.

<canvas width='600' height='300' style='width:600px;height:300px;' ></canvas>
怪我咯

楼上正解,浏览器由此需要对位图进行缩放。所以模糊是一定的了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号