使用drawRect的Createjs掩码在Safari中不起作用答案

【问题标题】：Createjs masking with drawRect not working in Safari使用drawRect的Createjs掩码在Safari中不起作用
【发布时间】：2019-08-05 14:50:54
【问题描述】：

我想从图片中剪下一些正方形。问题是Createjs 用drawRect 屏蔽在Safari 中不起作用。请在 Safari 中查看以下代码笔

https://codepen.io/anon/pen/moXXRN

它适用于除 Safari 以外的所有浏览器

【问题讨论】：

已确认，但这可能是 Safari/Canvas 错误。您正在使用负宽度矩形将大矩形向后缠绕，这是进行剪切的创造性解决方案。我会确认 Safari 的画布是否支持这一点并报告。

标签： safari html5-canvas createjs

【解决方案1】：

问题不在于遮罩或 EaselJS，而是 Safari 如何处理使用负坐标绘制的缠绕矩形。看起来大多数浏览器将一个负尺寸的矩形视为反向绘制，但 Safari 不会。

超级simple canvas example也有同样的问题：

var ctx = document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.rect(50,50,50,50);
ctx.rect(150, 150, 50, 50);
ctx.rect(300, 0, 350, -350);
ctx.fillStyle = "red";
ctx.fill();

在大多数浏览器中，这会绘制剪切区域。 Safari 没有。

使用自己的lineTo() 命令的解决方案是一个很好的解决方法。

【讨论】：

嗨兰尼，是的，你是对的。非常感谢您的支持。

【解决方案2】：

使用lineTo 和moveTo 函数而不是drawRect 设法让它在Safari 中工作

例如

shape.graphics.moveTo( 50, 50 );
shape.graphics.lineTo( 100, 50 );
shape.graphics.lineTo( 100, 100 );
shape.graphics.lineTo( 50, 100 );
shape.graphics.lineTo( 50, 50 );

shape.graphics.moveTo( 300, 0 );
shape.graphics.lineTo( 0, 0 );
shape.graphics.lineTo( 0, 300 );
shape.graphics.lineTo( 300, 300 );
shape.graphics.lineTo( 300, 0 );

https://codepen.io/anon/pen/EMEZMx

【讨论】：