SVG and Canvas
Useful links
Canvas
Example of Canvas
// https://www.w3schools.com/tags/canvas_quadraticcurveto.asp
const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')
ctx.beginPath()
ctx.moveTo(20,20)
ctx.quadraticCurveTo(20,100,200,20)
ctx.stroke()
Interpolacja a Canvas
Przykład interpolacji ruchu między dwoma punktami można zobaczyć jako ruch po łuku/krzywej lub jako LERP - linearna interpolacja.
Rysowanie linii między kilkoma punktami zostało opisane tutaj.
toDataURL
method
Each canvas element can be converted to a file (data URI) by using toDataURL
method. It returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.
What is Data URI?
Data URIs are composed of four parts: a prefix (data:), a MIME type indicating the type of data, an optional base64 token if non-textual, and the data itself: data:[<mediatype>][;base64],<data>
SVG
Animacja
<svg viewBox="0 0 194.6 185.1"> <polygon fill="#FFD41D" points=" ... shape 1 points ... "> <animate attributeName="points" dur="500ms" to=" ... shape 2 points ... /> </polygon> </svg>
<polygon id="shape" points=" ... shape 1 points ... "> <animate id="animation-to-check" begin="shape.click" attributeName="points" dur="500ms" to=" ... shape 2 points ... /> </polygon>
animationToCheck = document.getElementById("animation-to-check");
// run this on a click or whenever you want
animationToCheck.beginElement();
Filtry SVG w CSS
Poniżej zamieszczam przykładowe efekty SVG oraz demonstrację tych efektów na osobnych stronach www:
filter:
contrast(100)
blur(15px)
alpha(opacity=60)
blur()
brightness()
contrast()
url()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
sepia()
custom()