问JavaScript透明画布
EN

Stack Overflow用户

提问于 2022-03-29 20:52:12

回答 2查看 266关注 0票数 0

我使用这个jQuery插件在画布上自由作画。

我想清除画布以重新绘制，但是在我重新绘制之后，当我单击内部画布进行重绘时，我清除的旧绘图再次出现。

$('#canvasFirst').sketch();
$('button').on("click", (evt) => {
  var canvas = document.getElementById('canvasFirst');
  let context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
});

canvas { border: 1px solid; vertical-align: top }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script>
<p>Draw on the below canvas, then press "clear" and try to draw again.</p>

<canvas id="canvasFirst">
</canvas>
<button>clear</button>

javascript

html

html5-canvas

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-03-29 23:18:23

这个插件将所有绘图命令存储在一个actions数组中，在每个redraw上，它将遍历整个列表并再次绘制完整的内容。(这样可以避免笔划中有洞)。

医生们很难掌握，但是您可以通过.sketch("options", value)方法设置options的内容。

正如本期中所暗示的，将其设置为空数组将因此删除所有前面的命令。你所要做的就是重新绘制整个场景，现在是空的：

const $canvas = $('#canvasFirst');
$canvas.sketch();
$('button').on("click", (evt) => {
  $canvas.sketch("actions", []);
  $canvas.sketch("redraw");
});

canvas { border: 1px solid; vertical-align: top }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script>
<p>Draw on the below canvas, then press "clear" and try to draw again.</p>

<canvas id="canvasFirst">
</canvas>
<button>clear</button>

票数 0

Stack Overflow用户

发布于 2022-03-29 22:10:51

您可以尝试将画布的状态保存为blob。例如，作为图像/png。这里有两件坏事：

小小的不便。将blob转换为映像和返回的方法是异步的。必须兑现承诺。
速度。我强烈怀疑这个解决方案是否适合于需要速度游戏、视频等的任务。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const saveCanvasState = (canvas) => {
  const ctx = canvas.getContext('2d');
  ctx.save(); // save state
  let blob;

  return new Promise((r) => {
    canvas.toBlob( // toBlob is async method
      (b) => {
        blob = b;

        r(() =>
          new Promise((r) => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.restore();

            const img = new Image();

            img.addEventListener('load', () => {
              URL.revokeObjectURL(img.src);
              ctx.drawImage(img, 0, 0);
              r();
            });

            img.src = URL.createObjectURL(blob);
          }));
      },
      'image/png',
      1
    );
  });
};

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

saveCanvasState(canvas).then((restore) => {
  ctx.fillStyle = 'black';
  ctx.fillRect(150, 40, 100, 100);
  ctx.fillRect(100, 40, 100, 100);

  restore().then(() => {
    console.log('restored, can draw');
  });
});