Repozytorium Web Developera

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

How SVG Shape Morphing Works

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