0
目標は、非長方形のキャンバスまたはSVGシェイプに動的でアニメーション化された背景（JavaScriptまたはCSS）を追加することです。これは、標準のWebページだった場合には、層状のdiv要素または形状を使用することができるhttps://codepen.io/tmrDevelops/pen/NPMGjE非長方形のキャンバスまたはSVGシェイプの背景アニメーション？
Here's the shape, along with a mock-up of the end-goal.
：
は、ここでの例アニメーションです。残念ながら、これは "スマートTV"に表示されるlバンドのセクションなので、RFビデオを表示できるようにするには、白い部分（サンプル画像内）が透明でなければなりません。それはキャンバスや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();
}
私は、あなたが話していることを知りませんでした。あなたはLGスマートテレビのために物事を構築しているようです。私の知識は非常に限られています。キャンバスの一部を透明にするためにキャンバスの一部をクリアすることができます（Web上では少なくとも）。$ .clearRect（0、0、360、360）; https： //codepen.io/anon/pen/NXpyvZ – Lars
ラース。私が何を話しているのか分からないので、あなたは確かにすばらしい答えを出しました。 '$ .clearRect'にはブラウザのサポートが本当に良いようです。私はこれを知らなかったとは信じられない。ありがとうございます。 :)私はそれを打つつもりです。あなたが回答としてあなたのコメントを提出したいのであれば、私はそれを承認された回答として受け入れることを光栄に思うでしょう。 –