通过css / javascript对角线图像叠加

Question

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

Answer 1

您可以使用css div的canvas属性，而不是使用transform和javascript来处理简单的情况。例如

#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，可以使用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/