SVG filter in canvas interegreren

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoeri Achterbergen

Yoeri Achterbergen

22/01/2016 17:16:10
Quote Anchor link
Beste mensen,


Wat ik mij afvroeg is het mogelijk om een SVG filter in een canvas code te gebruiken?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<canvas id="canvas"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px arial";
ctx.strokeText("Hello world", 50, 100);
</script>
 
PHP hulp

PHP hulp

10/07/2020 23:17:19
 
Randy vsf

Randy vsf

22/01/2016 22:53:23
Quote Anchor link
SVG filters in CSS

En zo pas je het toe op het canvas element
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
canvas.setAttribute("style", "filter: blur(15px) hue-rotate(90deg);");
Gewijzigd op 22/01/2016 22:55:32 door Randy vsf
 
Yoeri Achterbergen

Yoeri Achterbergen

23/01/2016 10:20:36
Quote Anchor link
Thanks Randy!


Natuurlijk zullen browsers die geen css3 ondersteunen de svg filter ook niet weergeven toch?
Is er dan nog een andere optie om canvas afbeelding bijvoorbeeld te blurren?
 
Randy vsf

Randy vsf

23/01/2016 12:42:22
Quote Anchor link
Ik neem aan dat je daarmee oudere IE versies bedoelt?
Er zijn library's die een gedeelte kunnen fixen.

Cross-browser-Image-Blur-with-CSS
Gewijzigd op 23/01/2016 12:47:45 door Randy vsf
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.