通过 css/javascript 覆盖对角线图像

Question

我想创建一个 div 叠加层，设置为 5% 的不透明度，它会在此图像的第一行文本周围创建一个对角线边界框。在我看来，如果我有四个角的 x,y 坐标，我应该能够创建叠加层，但我无法弄清楚标记 div 的正确语法是什么。我认为可以做到这一点是错误的吗？如果不能，有人可以指出一些这样做的方法吗？

Answer 1

对于简单的情况，您可以使用 transform 属性来代替 css div 的 canvas 和 javascript，而不是使用 transform 属性。例如与

#diag {
    background-color: rgba(255, 0, 255, 0.25);
    width: 700px;
    height: 60px;
    position: absolute;
    left: 100px;
    top: 160px;
    transform: rotate(2deg) skew(30deg)
}

您可以在图像中文本的第一行放置一个 div，该 div 可以使用 CSS 轻松设置边框样式，并且可以直接用于事件（悬停、点击）。

如果您需要指定 4 个角，但通常仅单个变换是不够的，您必须在放置在图像上的画布中绘制叠加层。这是因为默认情况下画布是透明的，并且只有您明确绘制的内容可见，而其他区域中的图像保持不变。例如使用：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.beginPath();
ctx.moveTo(166, 282);
ctx.lineTo(855, 296);
ctx.lineTo(897, 351);
ctx.lineTo(212, 349);
ctx.closePath();
ctx.fillStyle = "rgba(0, 255, 0, 0.25)";
ctx.strokeStyle = "#0F0";
ctx.lineWidth = 4;
ctx.fill();
ctx.stroke();

我以绿色突出显示第三行（填充命令），还添加了边框（笔划命令）。

http://jsfiddle.net/hr9afs4z/1/