[英]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.