canvas绘图被变■大且模糊不清的处理方式

日期:2020-12-11 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

先来了解canvas的这好多个总宽和高宽比

canvas.width是画布的尺寸,而canvas.style.width是访问器3D渲染的canvas的规格

第一个难题:画布的高宽比和总宽

画布的宽和高一定要在canvas标识中设定,假如是在css款式中设定,则不了功效,画布会依照默认设置规格width:300px,height:150px显示信息

//在标识中设定宽和高
<canvas id="canvas" width="324" height="622" >

除开立即在canvas标识设定,还能够在绘图的情况下设定,留意画布的宽高不用企业

canvas.width = 324;
canvas.height = 622;

第二个难题:绘图的图型被变大,图象模糊不清

它是因为手机上的机器设备单独清晰度和物理学清晰度不一致,机器设备清晰度比=物理学清晰度/机器设备单独清晰度,大部分提出分手机的机器设备清晰度之比2,这寓意着100px的图象要放到200px中才能够一切正常显示信息

用devicePixelRatio能够获得到机器设备清晰度比,获得到清晰度比后,大家便可以操纵图型的放缩占比

scale = window.devicePixelRatio;

不久讲过,canvas.style.width是访问器3D渲染的canvas的规格,那要想你画的图型恰当且清晰的显示信息在画布中,你必须设定恰当的style.width和style.height,以下图,留意再加企业。

canvas.style.width = canvas.width / scale + 'px';
canvas.style.height= canvas.height/ scale + 'px';

上边大家设定了画布的总宽为324,假如不设定style.width,则画的图型会被变大到2倍显示信息。

到此这篇有关canvas绘图被变大且模糊不清的处理方式的文章内容就详细介绍到这了,大量有关canvas图被变大且模糊不清內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!