Question

您好我目前在使用我的网站应用程序时遇到了一些问题，

我有画布要清除，但当我去清除它时它会清除！这很棒，但是当我再次画画时，它并没有给我一条流畅的线条。

clear.js

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var CleanBtn = document.getElementById('clear');

var CleanCanvas = function(){
    context.fillStyle = 'white';
    context.fillRect(0,0, window.innerWidth, window.innerWidth);
}

CleanBtn.addEventListener('click', CleanCanvas);

我的网站是www.drawthelot.com

Answer 1

使用context.clearRect清除画布，例如

context.clearRect(0,0, window.innerWidth, window.innerWidth);

DEMO

Answer 2

那是因为你改变了context.fillStyle，因为你正在使用白色绘图，如果你再次点击你的UI右边的黑色，一切都恢复正常。
你可以修复像这样的问题：

var CleanCanvas = function(){
   var lastColor = context.fillStyle;
   context.fillStyle = 'white';
   context.fillRect(0,0, window.innerWidth, window.innerWidth);
   context.fillStyle = lastColor;
}

但我建议您使用默认的context.clearRect方法擦除内容，此方法也会将不透明度重置为0.

var CleanCanvas = function(){
   context.clearRect(0,0, canvas.width, canvas.height);
}

画布清除不正常

2 个答案: