canvas 图片模糊,小程序canvas图片模糊

问题：canvas绘制图片，图片变模糊

　　设置一定大小的画布。我在这里设置的画布大小是400px*400px。当一幅画完整的画在画布上时，很大概率画面会模糊。

　　我在画布上画了下面这幅图作为例子。它应该看起来更明显和模糊。

　　单方面修改画面精度，换成更高清的画面，已经被证明是没有用的，但是效果并不明显。而且我当时的图片是手绘的，大小5M，无法切片加载图片，直接加载整张图片非常耗时。

那么如何去处理这样的问题呢？

　　大家在生活中应该都遇到过这样的情况。同样的1080p视频，在大屏幕显示器上看和在手机上看是不一样的。大屏幕往往会让人产生一种模糊感。在手机的小屏幕上，会感觉异常清晰。

要点：两个点

　　通过上面的例子，我们可以将图片放大，然后再绘制成原来大小的画布，这样图片的精度受损会小一些。

　　了解画布(*星号)的绘制原理

　　Canvas其实就是一个画布，如果可以的话可以放大一下，可以看到它也是由像素组成的。

　　如上图，可以看到一个个网格。假设我们需要在上面画一条1px的线，就会得到上面的效果。

　　但canvas是从中线开始画，向两边延伸。

　　他会以图中的红线为中心线，向两边延伸，从而得到一条1px的纵线。但是像素在0.5px是不允许出现的，所以只是简单的延伸了一点点，填充了像素。所以你看到的效果如下

　　所以一张画到画布上，很多区域会被画两遍，所以重叠会造成你看到的画面很模糊。

　　其实马赛克的原理就是把相邻像素之间的颜色计算出来交叉覆盖，起到编码的效果。

　　所以有几种不同的解决方案。

解决方案

方法一

　　绘图时，如果是直线，可以移动0.5px找到中心线，例如：

　　ctx.moveTo(100.5，100.5)；ctx.lineTo(200.5，100.5)；

方法二

　　如果是图片，可以将画布放大一倍，但是通过css保持不变，然后绘制到画布中，这样画布放大一倍就可以画出图片，然后通过css将画布缩小到原来的大小。

　　例子

　　！DOCTYPE html lang= en head meta charset= UTF-8 /meta name= viewport content= width=device-width，Initial-scale=1.0/titlecanvas绘制模糊的图片/title/head body img id= img src= 3359desk-fd.zol-img.com.cn/t _ s 960 x600 c 5/G2/m00/09/0c/Cg-4 wvvv6 jwmiczjadzu 1 eyhzwaafk 1 wd 9 poma 3b pt 053 . jpg width= 100 px/canvas id= canvas width= 400 px height= 400 px /canvas canvas id= canvas 2 width= 800 px height= 800 px style= width:400 px；高度：400像素；/canvas /body脚本函数init(){ console . log(1234)；let canvas=document . getelementbyid( canvas )；let img=document . getelementbyid( img )；let context=canvas . get context( 2d )；context.drawImage(img，0，0，400，400)；let canvas 2=document . getelementbyid( canvas 2 )；let context 2=can vas 2 . get context( 2d )；context2.drawImage(img，0，0，800，800)；} window.onload=init/script/html为了方便，都是用一个html写的，图片也是网络图，方便查找。左侧为未处理，即代码中的canvas效果，右侧为方法2处理，即canvas2效果。请自行鉴定。

方法三

　　图片可以通过transform:scale(0.5)进行缩放，然后绘制到画布上。

　　以上是面试中对油画素描模糊画面的处理细节。关于面试中画布绘画画面模糊的更多信息，请关注其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。