canvas绘制图片,图片变模糊 |
您所在的位置:网站首页 › canvas图片下落 › canvas绘制图片,图片变模糊 |
canvas绘制图片,图片变模糊
问题:
设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况。 我拿下面一张图片画到canvas上作为例子,看上去应该比较明显的有模糊的感觉。 其实在大学的时候我有做过canvas相关的开发内容,也遇到这种问题,当时太菜不懂。单方面的去修改图片精度,换成更高清的图片,事实证明确实有一丢丢用,但是效果不是很明显。况且我当时那个图片由于是手绘的,大小有5M,也不会切片加载图片,直接整个加载非常耗时。旧事不提。。 那么如何去处理这样的问题呢? 生活中应该大家都遇到过这样的情况,同样的1080p的视频,在大屏显示器上看和手机上看效果是不一样的,大屏往往会让人感觉一种模糊感。而在手机小屏幕上,就会感觉异常的清晰。 两个点 通过上面的一个例子,我们可以将图片放大,然后再绘制进原先大小的canvas中,这样图片的精度受损会比较小了解canvas的绘制原理(*打星号) canvas其实就是一张画布,所以如果可以的话,你可以将它放大,可以发现它也是有一个个的像素组成的。![]() ![]() ![]() 为了方便,就都写在一个html中了,图片也是找的网图。左边是未处理,也就是代码中的canvas效果,右边是通过方法2处理后的,也就是canvas2效果,请自行鉴别嗷。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |