介绍
这篇文章给大家介绍使用帆布绘制模糊如何解决,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
首先,需要理解画布的展示机制。
& lt; canvas id=癿ap",宽度=?75“,身高=?67“祝辞& lt;/canvas> 我绘制了一张375 px的画布,iphone6的宽度也是375 px,好,帆布铺满了整个屏幕。
那么画布的大小就是375 px,帆布类似于图片,一张375 px的图片,我们就把它当做是图片来看就好了。我,尖沙咀段坤说的。
如果遇到了屏幕宽度400 px的手机,那么图片会拉伸,帆布也会拉伸,拉伸则必然会模糊。
那么iphone6确实是375 px宽度的手机,还是会出现模糊问题,为什么呢?手机端会存在高清屏的问题。也就是我们说的2倍屏或者3倍屏,也叫作屏幕的DPI。高清屏在绘制界面时,会把2 px的宽度渲染成1 px,也就达到了高清的效果,也就是说,我们在高清屏下看到的375 px其实是750个像素点绘制出来的,帆布其实是375 px被拉伸到了750 px再展示出来的,拉伸则必然会模糊。
好了,模糊的原因知道了,其实就是高清屏所带来的麻烦,怎么解决呢?
<强>解决方法
如果是2倍屏,我们把设计图上375 px的帆布画成750 px不就解决了?
<强>设置画布样式
这里我们不写宽度和高度,而直接写风格。把它看成是图片,我们先不管图片原宽高是多少,不管拉伸还是压缩,直接让他铺满整个屏幕.style里写的宽高不是图片的原宽高,也就是风格里写的宽高并不是帆布的真实宽高
& lt; canvas id=癿ap",风格=翱矶?,375 px;高度:330 px;“祝辞& lt;/canvas> <强>设置帆布宽高
上面的风格并不是帆布的真实宽高,那么我们如何设置它的宽高呢?
普通屏,2倍屏,3倍屏如果分别适配?
& lt; canvas id=癿ap",风格=翱矶?,375 px;高度:330 px;“祝辞& lt;/canvas>
& lt; script>
let canvas =, document.querySelector(& # 39; #图# 39;);//,获取到屏幕倒是是几倍屏。
let getPixelRatio =,函数(上下文),{
var 才能;backingStore =, context.backingStorePixelRatio | |
,,,context.webkitBackingStorePixelRatio | |
,,,context.mozBackingStorePixelRatio | |
,,,context.msBackingStorePixelRatio | |
,,,context.oBackingStorePixelRatio | |
,,,context.backingStorePixelRatio | |, 1;
,,return (window.devicePixelRatio | |, 1),/, backingStore;
}；
,//iphone6下得到是2,
const pixelRatio =, getPixelRatio(画布);//,设置画布的真实宽高
时间=canvas.width pixelRatio *, canvas.offsetWidth;,//,想当于,2,*,375,=,750,
时间=canvas.height pixelRatio *, canvas.offsetHeight;
& lt;/script> 那么画布的宽高就变成了下图这样,750宽度的画布,如果你是2倍屏我就刚好能够适应! ! !
设置后的宽高
<强>开始画点
比如,375的设计图上,有一个半径为2 px的圆点,点的位置是x: 100年,杨:100 .
那么我们现在画布上的宽度是750,宽高变成了之前的2倍。为了视觉上位置保持不变,我们画点的位置就应该是x: 100 * pixelRatio, y: 100 * pixelRatio。
完整代码如下:
& lt; canvas id=癿ap",风格=翱矶?,375 px;高度:330 px;“祝辞& lt;/canvas>
& lt; script>
let canvas =, document.querySelector(& # 39; #图# 39;);//,获取到屏幕倒是是几倍屏。
let getPixelRatio =,函数(上下文),{
var 才能;backingStore =, context.backingStorePixelRatio | |
,,,context.webkitBackingStorePixelRatio | |
,,,context.mozBackingStorePixelRatio | |
,,,context.msBackingStorePixelRatio | |
,,,context.oBackingStorePixelRatio | |
,,,context.backingStorePixelRatio | |, 1;
,,return (window.devicePixelRatio | |, 1),/, backingStore;
}；
,//iphone6下得到是2,
const pixelRatio =, getPixelRatio(画布);//,设置画布的真实宽高
时间=canvas.width pixelRatio *, canvas.offsetWidth;,//,想当于,2,*,375,=,750,
时间=canvas.height pixelRatio *, canvas.offsetHeight;//,开始画点
let ctx =, canvas.getContext (“2 d");
ctx.beginPath ();
,//375年设计图上的位置和尺寸都应该* pixelRatio 因为我们现在的画布是750
ctx.arc (100 * pixelRatio, 100 * pixelRatio,, 2 * pixelRatio, 0,, 2, *, Math.PI);
时间=ctx.fillStyle “# fff";
ctx.fill ();
ctx.closePath ();//,……你的其他代码
& lt;/script>
