时间戳

首页 > 解决方案 > 使用drawRect的Createjs掩码在Safari中不起作用

safari - 使用drawRect的Createjs掩码在Safari中不起作用

问题描述

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

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

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

标签： safarihtml5-canvascreatejs

解决方案

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

一个超级简单的画布示例也有同样的问题：

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()命令的解决方案是一个很好的解决方法。

推荐阅读