簡體   English   中英

非矩形,Canvas或SVG形狀的背景動畫?

[英]Background animation within non-rectangular, Canvas or SVG shape?

目標是向非矩形,Canvas或SVG形狀添加動態的動畫背景(JavaScript或CSS)。

這是一個示例動畫: https : //codepen.io/tmrDevelops/pen/NPMGjE

這是形狀,以及最終目標的模型。

如果這是標准網頁,則可以使用分層的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();
}

我對Smart TV應用場景不熟悉。 但是,在舊的常規Web上,可以通過在工程圖上下文上調用clearRect(xCord, yCord, xLength, yLenght)來恢復畫布(部分)上的透明度。 Codepen<body>上設置了background-image ,您將在調用clearRect時看到該圖像。 我懷疑您的電視會采取同樣的行動。

如果要求您沒有任何占用視頻空間的元素,則在pandora盒子內可能還有另一種解決方案。
您可以嘗試使用2個畫布,一個用於左側,一個用於底部,並同時在它們上繪制,從而給人一種被連接的錯覺。
(例如,這是一個L形畫布。)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM