Question

目标是将动态动画背景（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();
}

Answer 1

我不熟悉智能电视应用场景。但是，在常规Web上，您可以通过在绘图上下文中调用clearRect(xCord, yCord, xLength, yLenght)来恢复画布（部分）的透明度。此codepen在background-image上设置了<body>，您会在调用clearRect时看到图片显示。我怀疑你的电视会采取同样的行动。

如果要求您没有占据视频空间的任何元素，那么潘多拉盒子中可能会有另一个解决方案。
您可以尝试使用2个画布，一个用于左侧，一个用于底部，并同时绘制它们，给出连接的假象。
（如同，它是一个L形帆布。）

非矩形，Canvas或SVG形状的背景动画？

1 个答案: