目标是将动态动画背景（JavaScript或CSS）添加到非矩形，Canvas或SVG形状。
这是一个动画示例：https://codepen.io/tmrDevelops/pen/NPMGjE
Here's the shape, along with a mock-up of the end-goal.
如果这是标准网页，则可以使用分层div或形状。不幸的是，这是在“智能电视”上显示的l波段部分 - 因此白色区域（在示例图像中）必须是透明的，以便可以查看RF视频。
无论是Canvas还是SVG形状，剪裁都可以用于图层和蒙版形状 - 但是，（从我尝试过的所有内容）剪辑不适用于直接应用于类或id的任何内容。
到目前为止，我还没有找到任何这方面的例子。
任何帮助是极大的赞赏。
使用基本剪辑的示例代码...
(function () {
canvas = document.getElementById('lband');
ctx = canvas.getContext("2d");
setCanvasSize();
draw();
})();
function setCanvasSize() {
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
W = canvas.width;
H = canvas.height;
Hl = canvas.height * .85;
Wl = canvas.width * .85;
draw();
}
function draw() {
ctx.save();
ctx.beginPath();
ctx.moveTo(0, Hl);
ctx.lineTo(Wl, Hl);
ctx.lineTo(Wl, 0);
ctx.lineTo(W, 0);
ctx.lineTo(W, H);
ctx.lineTo(0, H);
ctx.closePath();
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 640, 480);
ctx.restore();
}
我不熟悉智能电视应用场景。但是，在常规Web上，您可以通过在绘图上下文中调用clearRect(xCord, yCord, xLength, yLenght)来恢复画布（部分）的透明度。这个codepen在background-image上设置了一个<body>，你会看到这个图像是在调用clearRect时显示的。我怀疑你的电视会采取同样的行动。
如果要求您没有占据视频空间的任何元素，那么潘多拉盒子中可能会有另一个解决方案。 您可以尝试使用2幅画布，一幅用于左侧，一幅用于底部，并同时绘制它们，给人一种连接的错觉。 （如同，它是一个L形帆布。）