全国服务热线:4008-888-888

技术知识

高清屏下canvas重设规格引起的难题的处理

大家了解,清空canvas画布內容有下列两个方式。

第1种方式是cearRect涵数:

context.cearRect(0,0,canvas.width,canvas.height)

第2种方式便是用原值再次设定1下canvas的宽(或高)

canvas.width = canvas.width
// or 
canvas.height = canvas.height

第2种方式能够起功效,是由于canvas的1个特性:

每当画布的高宽比或宽度被更改时,画布內容就会被清空。有关內容能够参照 https://www.w3school.com.cn/html5/att_canvas_width.asp

在1个可视性化新项目中,大家发如今1些电脑上上面一直会出現实际效果紊乱的状况。

历经调节,大家发现,原先是“canvas.width = canvas.width”惹的祸。一般显示屏下面下不容易有难题,可是假如显示屏是高清屏,就会出現难题。这是由于,高清屏下,大家以便解决绘图图型模糊不清的难题,一般会做以下解决:

function setupCanvas(canvas) {
        let width = canvas.width,
          height = canvas.height,
          dpr = window.devicePixelRatio || 1.0;
        if (dpr != 1.0 ) {
          canvas.style.width = width + "px";
          canvas.style.height = height + "px";
          canvas.height = height * dpr;
          canvas.width = width * dpr;
          ctx.scale(dpr, dpr);
        }
      }

大家了解,高清屏下window.devicePixelRatio都超过1。因此在制图以前画笔会被放缩:

ctx.scale(dpr, dpr);

大家了解cavnas是根据情况的制图组件。 在其中放缩占比值也在情况管理方法当中。 当大家再次设定canvas的宽(高也1样)的情况下,不但会清空canvas的画布內容,另外还会把制图情况重设到最初始的情况,初始情况下画笔的放缩占比是1,放缩占比值会被重设为1,因此致使绘图实际效果紊乱。
 

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服