时间戳

首页 > 解决方案 > 调整画布大小的后果

javascript - 调整画布大小的后果

问题描述

因此，我试图通过仅在调整窗口大小时访问 DOM 的画布属性来优化我的代码，但我遇到了这个奇怪的问题。为什么调整大小会阻止这种情况？PS 不确定要包括什么我现在有 2k 行代码。

我在用着

document.getElementById('mycanvas').getContext("2d").clearRect(-2000, -2000, 2000, 2000)

在我的渲染循环中：

document.getElementById('mycanvas').getContext("2d").height = window.innerHeight

在此处输入图像描述

没有它： 在此处输入图像描述

标签： javascriptcanvas

解决方案

设置HTMLCanvasElement 的一个width或两个属性会将上下文的所有属性重置为默认值。它还将删除所有剪切区域，更有趣的是，在您的情况下，它将重置转换矩阵，并设置一个新的像素数据（全透明黑色）。这很慢，所以你从你的代码中删除它是正确的。height

您的调用ctx.clearRect将x和y坐标设置为-2000，这意味着使用默认矩阵变换，您正在清除不存在的像素。
设置 HTMLCanvasElement.height 是之前清除画布的原因。

我们还可以在您的第二个屏幕截图中看到，您每次都在右下角稍微多一点地绘制网格，这表明您可能正在修改上下文矩阵（例如ctx.translate(x, y)）。
现在您没有使用height设置重置它，您需要明确地执行它。这可以通过ctx.setTransform(1,0,0,1,0,1).

所以绘图功能的基本开始看起来像

function draw() {
  // clear
  ctx.setTransform(1, 0, 0, 1, 0, 0); // reset the transform matrix (fast)
  ctx.clearRect(0, 0, canvas.width, canvas.height); // clear all pixels (fast)
  //... start drawing ...

现在，您可能假设有其他属性在没有重置为默认值的情况下重置为默认值，例如fillStyle等等。它们中的大多数可以在需要时简单地设置为您想要的。
但是，如果您正在使用ctx.clip()（但查看屏幕截图，您似乎没有使用），您需要保存（）和恢复（）上下文的状态才能删除剪切区域（糟糕的 API 设计...... ）。

推荐阅读