高清屏下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，因此致使绘图实际效果紊乱。
 

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