Hintergrundanimation in nicht rechteckiger, Canvas- oder SVG-Form?

Das Ziel besteht darin, einen dynamischen, animierten Hintergrund (JavaScript oder CSS) zu einer nicht rechteckigen, Canvas- oder SVG-Form hinzuzufügen.Hintergrundanimation in nicht rechteckiger, Canvas- oder SVG-Form?

Hier ist ein Beispiel Animation: https://codepen.io/tmrDevelops/pen/NPMGjE

Here's the shape, along with a mock-up of the end-goal.

Wenn dies eine Standard-Web-Seite war, dann eine geschichtete div oder Form verwendet werden könnte. Leider ist dies ein L-Band-Abschnitt, der auf einem "Smart TV" angezeigt wird - der weiße Bereich (im Beispielbild) muss also transparent sein, damit das RF-Video sichtbar ist.

Ob es eine Leinwand oder SVG Form kann Clipping verwendet werden, um Formen zu Schicht und Maske - aber (von allem, was ich versucht habe) Clipping auf etwas direkt auf eine Klasse angewendet nicht funktioniert oder id.

Bis jetzt konnte ich keine Beispiele dafür finden.

Jede Hilfe wird sehr geschätzt.

Beispiel-Code Grund Ausschnitt mit ...

(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(); 
}

Quelle

2017-12-28 Dustin Halstead

Ich habe keine Ahnung, wovon Sie reden, geht durch Sie Geschichte es scheint, dass Sie Dinge für ein LG Smart TV bauen. Mein Wissen ist in dieser Hinsicht sehr begrenzt, das heißt, Sie können Teile der Leinwand löschen, um sie transparent zu machen, (zumindest im Internet) ala '.clearRect (0, 0, 360, 360); https: //codepen.io/anon/pen/NXpyvZ – Lars

Nun verdammt Lars. Weil du keine Ahnung hast, wovon ich rede, hast du sicher eine gute Antwort gegeben. Es sieht so aus, dass '$ .clearRect' auch wirklich gute Browser-Unterstützung bietet. Ich kann nicht glauben, dass ich nie davon gewusst habe. Danke mein Herr. :) Ich versuche es mal. Wenn Sie Ihren Kommentar als Antwort einreichen möchten, wäre es mir eine Ehre, ihn als die genehmigte Antwort zu akzeptieren. –

ich nicht vertraut mit der Smart TV-Apps bin Szene. Im alten regulären Web können Sie die Transparenz auf (Teilen von) Canvas wiederherstellen, indem Sie clearRect(xCord, yCord, xLength, yLenght) im Zeichenkontext aufrufen. Diese codepen hat eine background-image auf der <body> gesetzt, Sie werden sehen, dass das Bild beim Aufruf clearRect offenbart wird. Ich vermute, dein Fernseher wird sich genauso verhalten.

Wenn es erforderlich ist, dass Sie keine Elemente im Videobereich haben, gibt es möglicherweise eine andere Lösung in Pandora's Box.
Sie könnten versuchen, 2 Leinwände zu verwenden, eine für die linke Seite, eine für die Unterseite, und gleichzeitig auf sie zeichnen, wodurch die Illusion entsteht, verbunden zu sein.
(wie in, es ist eine L-förmige Leinwand.)

Quelle

2017-12-28 21:25:14 Lars

Hintergrundanimation in nicht rechteckiger, Canvas- oder SVG-Form?

Antwort

Verwandte Themen