我在 Firefox 中使用 canvas clearRect 时遇到了奇怪的问题。如果设置了剪切区域,则 clearRect() 会重绘剪切区域和要清除的矩形之外的内容。由于它重新绘制它会导致问题。它在其他浏览器中正常工作,如 Chrome 和 IE - clearRect 不会影响剪切区域之外的内容。
这是代码:
var canvas = document.getElementById("test");
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(255, 0, 0, 0.1)';
context.fillRect(0, 0, 40, 40);
context.beginPath();
context.rect(0, 0, 20, 20);
context.clip();
context.clearRect(10, 10, 20, 20); // causes an issue, see example below
实际代码:http: //jsfiddle.net/P8fyP/4/