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

Question

The goal is to add a dynamic, animated background (JavaScript or CSS) to a non-rectangular, Canvas or SVG shape. 目标是向非矩形，Canvas或SVG形状添加动态的动画背景（JavaScript或CSS）。

Here's an example animation: https://codepen.io/tmrDevelops/pen/NPMGjE 这是一个示例动画： https : //codepen.io/tmrDevelops/pen/NPMGjE

Here's the shape, along with a mock-up of the end-goal. 这是形状，以及最终目标的模型。

If this was a standard web page, then a layered div or shape could be used. 如果这是标准网页，则可以使用分层的div或形状。 Unfortunately, this is an l-band section displayed on a "Smart TV" -- so the white area (in the example image) must be transparent in order for the RF video to be view-able. 不幸的是，这是在“智能电视”上显示的一个L波段部分-因此，白色区域（在示例图像中）必须是透明的，以便RF视频可见。

Whether it's a Canvas or SVG shape, clipping can be used to layer and mask shapes -- but, (from everything I've tried) clipping doesn't work on anything applied directly to a class or id . 无论是Canvas还是SVG形状，都可以使用裁剪来对形状进行分层和蒙版-但是，（从我尝试过的所有内容来看）裁剪不适用于直接应用于类或id的任何内容。

So far, I haven't been able to locate any examples of this being done. 到目前为止，我还没有找到完成此操作的任何示例。

Any help is greatly appreciated. 任何帮助是极大的赞赏。

Example Code using basic clipping ... 使用基本剪辑的示例代码...

(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

I'm not familiar with the Smart Tv apps scene. 我对Smart TV应用场景不熟悉。 However, on ye olde regular web, you can restore transparency on (parts of) a canvas by calling clearRect(xCord, yCord, xLength, yLenght) on the drawing context. 但是，在旧的常规Web上，可以通过在工程图上下文上调用clearRect(xCord, yCord, xLength, yLenght)来恢复画布（部分）上的透明度。 This codepen has set a background-image on the <body> , you'll see that the image is revealed when calling clearRect . 该Codepen在<body>上设置了background-image ，您将在调用clearRect时看到该图像。 I suspect your Tv will act the same. 我怀疑您的电视会采取同样的行动。

If it's required that you do not have any elements occupying the video space, there might be another solution inside pandora's box. 如果要求您没有任何占用视频空间的元素，则在pandora盒子内可能还有另一种解决方案。
You could try to use 2 canvases, one for left side, one for the bottom, and draw on them simultaneously, giving the illusion of being connected. 您可以尝试使用2个画布，一个用于左侧，一个用于底部，并同时在它们上绘制，从而给人一种被连接的错觉。
( as in, it's one L-shaped canvas.) （例如，这是一个L形画布。）

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-12-28 21:25:14

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-12-28 21:25:14

解决方案1
0 已采纳 2017-12-28 21:25:14