SVG filter in canvas interegreren
Wat ik mij afvroeg is het mogelijk om een SVG filter in een canvas code te gebruiken?
Code (php)
1
2
3
4
5
6
7
8
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>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px arial";
ctx.strokeText("Hello world", 50, 100);
</script>
En zo pas je het toe op het canvas element
Code (php)
1
canvas.setAttribute("style", "filter: blur(15px) hue-rotate(90deg);");
Gewijzigd op 22/01/2016 22:55:32 door Randy vsf
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?
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