canvas 模糊,canvas 字体模糊
模糊原因
首先，你需要了解canvas的显示机制。
canvas ID= map width= 375 height= 667 /canvas我用375px画了一张画布，iphone6的宽度也是375px。好了，画布覆盖了整个屏幕。
那么画布的大小就是375px。画布类似于一张图片，375px的图片。就当一张图吧。我，尖沙咀的段坤说的。
如果遇到屏幕宽度为400px的手机，画面会拉伸，画布会拉伸，拉伸必然会模糊。
所以iphone6确实是一款375px宽的手机，还是会有模糊的问题？为什么？手机上会有高清屏的问题。也就是我们所说的2折屏或者3折屏，也叫屏幕的DPI。高清屏幕绘制界面时，会渲染2px到1px的宽度，从而达到高清的效果。也就是说，我们在高清屏幕上看到的375px实际上是750像素画出来的，画布实际上是拉伸到750px才显示出来的，所以拉伸必然会模糊。
好吧，我知道模糊的原因了。其实就是高清屏带来的麻烦。怎么解决？
解决方法
如果是2x屏幕，我们把设计图上的375px画布画成750px不就解决了吗？
设置canvas样式
这里不写宽度和高度，直接写风格。就当是一张图吧。让它直接覆盖整个屏幕吧，不管图片原来的宽度和高度，不管是拉伸还是压缩。风格中所写的宽度和高度并不是画面原来的宽度和高度，即风格中所写的宽度和高度并不是画布的真实宽度和高度。
canvas id= map style= width:375 px；高度：330像素；/画布设置canvas宽高
上面的样式并不是画布的真实宽度和高度，那么我们如何设置它的宽度和高度呢？
正常屏，2倍屏，3倍屏，如果分别适配？
canvas id= map style= width:375 px；高度：330像素；/canvasscriptlet canvas=document . query selector( # map )；//是你得到的屏幕的好几倍。let getpixelrratio=function(context){ var backing store=context . backingstorepixelrratio context . webkitbackingstorepixelrratio context . mozbackingstorepixelrratio context . msbackingstorepixelrratio context . obackingstorepixelrratio context . backingstorepixelrratio 1；return(window . devicepixelrratio 1)/backing store；};iphone 6下，得到2 const pixel ratio=getpixel ratio(canvas)；//设置画布canvas的真实宽度和高度canvas.width=像素比* canvas.offsetwidth//要2 * 375=750canvas.height=像素比* canvas.offsetheight/script然后画布的宽度和高度变成如下所示。对于一个750宽度的画布，如果你有一个2x的屏幕，我刚好可以适应！
设置的宽度和高度
开始画点
比如375的设计图上，有一个半径为2px的点，点的位置是x: 100，y: 100。
所以我们现在画布的宽度是750，宽度和高度都变成了以前的两倍。为了视觉上保持位置不变，我们画点的位置应该是X: 100 *像素比，Y: 100 *像素比。
完整的代码如下：
canvas id= map style= width:375 px；高度：330 px "/canvasscript let canvas=document。查询选择器(" # map ")；//获取到屏幕倒是是几倍屏。设getpixeira TiO=function(context){ var back torager=context。backstorepixel ratio 上下文。webkitbackstorepixels比率 上下文。msbackstorepixels比率 上下文。obstackingtorpixels比率 上下文。back store pixel ratio 1；返回(窗口。device pinterio 1)/后台；}://iphone6下得到是2常数像素比=getpixeira TiO(canvas)；//沙吾提-肉桂的真实宽高画布宽度=像素比例*画布。offsetwidth//想当于2 * 375=750画布。高度=像素比例*画布offsetheight//开始画点让CTX=画布。获取上下文(“2d”)；ctx.beginPath()://375设计图上的位置和尺寸都应该*像素比例因为我们现在的-肉桂切CTX街750号。弧(100 *像素比例、100 *像素比例、2 *像素比例、0.2 *数学)。(pi)；ctx。fillstyle= #fffctx.fill():CTX。close path()；//-我.你的其他代码/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。