pense-bête de bruno sanchiz

Accueil > Programmation > Html Css Javascript... > html5 : canvas et path et svg

html5 : canvas et path et svg

Publié le 20 août 2017, dernière mise-à-jour le 9 janvier 2023, 5 visites, 23100 visites totales.

liens externes
svg seul : un cercle
button + svg : bouton
svg+transform+path : icone
button + svg+transform+path :bouton de recherche avec icone
canvas + getContext("2d") : une étoile


un cercle

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

un bouton de recherche

<button type="button" class="search-bar-submit" aria-label="Recherche">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<svg data-id="icon-search" width="39px" height="20px" viewBox="0 0 19 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
</button>

un icone de recherche

<svg data-id="icon-search" width="19px" height="20px" viewBox="0 0 19 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(-281.000000, -19.000000)">
<path d="M292.947588,31.0045721 C295.243085,28.6980328 295.243085,24.950528 292.947588,22.6168299 C290.652737,20.3109391 286.894853,20.3109391 284.600001,22.6168299 C282.30515,24.9227206 282.30515,28.6986814 284.600001,31.0045721 C286.894853,33.3104629 290.652737,33.3104629 292.947588,31.0045721 Z M293.045079,33.3465702 C290.028934,35.33418 285.917692,34.9984965 283.271445,32.3395197 C280.242852,29.2963578 280.242852,24.3250442 283.271445,21.2818823 C286.300038,18.2387204 291.247552,18.2387204 294.280018,21.285797 C297.233225,24.2881209 297.302432,29.0666456 294.484031,32.1225488 L299.724847,37.3885758 C300.091718,37.7572113 300.091718,38.3548877 299.724847,38.7235233 C299.357976,39.0921589 298.763161,39.0921589 298.39629,38.7235233 L293.045079,33.3465702 Z" id="Combined-Shape">
</path>
</g>
</svg>

un bouton de recherche

<button type="button" class="search-bar-submit" aria-label="Recherche">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<svg data-id="icon-search" width="19px" height="20px" viewBox="0 0 19 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(-281.000000, -19.000000)">
<path d="M292.947588,31.0045721 C295.243085,28.6980328 295.243085,24.950528 292.947588,22.6168299 C290.652737,20.3109391 286.894853,20.3109391 284.600001,22.6168299 C282.30515,24.9227206 282.30515,28.6986814 284.600001,31.0045721 C286.894853,33.3104629 290.652737,33.3104629 292.947588,31.0045721 Z M293.045079,33.3465702 C290.028934,35.33418 285.917692,34.9984965 283.271445,32.3395197 C280.242852,29.2963578 280.242852,24.3250442 283.271445,21.2818823 C286.300038,18.2387204 291.247552,18.2387204 294.280018,21.285797 C297.233225,24.2881209 297.302432,29.0666456 294.484031,32.1225488 L299.724847,37.3885758 C300.091718,37.7572113 300.091718,38.3548877 299.724847,38.7235233 C299.357976,39.0921589 298.763161,39.0921589 298.39629,38.7235233 L293.045079,33.3465702 Z" id="Combined-Shape">
</path>
</g>
</svg>
</button>


une étoile

 <canvas id='canvas' width='210' height='297'></canvas>
    <script>
    var ctx = document.getElementById("canvas").getContext("2d");
    	
// #layer1
	
// #path10
	ctx.beginPath();
	ctx.lineWidth = 0.002646;
	ctx.miterLimit = 4;
	ctx.fillStyle = 'rgb(157, 182, 58)';
	ctx.moveTo(90.714287, 126.910720);
	ctx.lineTo(77.261820, 123.473320);
	ctx.lineTo(66.803770, 132.606430);
	ctx.lineTo(65.915884, 118.750170);
	ctx.lineTo(53.998064, 111.626250);
	ctx.lineTo(66.901787, 106.500000);
	ctx.lineTo(69.994220, 92.964073);
	ctx.lineTo(78.857045, 103.652140);
	ctx.lineTo(92.686093, 102.410390);
	ctx.lineTo(85.259898, 114.142230);
	ctx.fill();

    </script>
    

------
canvas (synonyme de calque, layer ) :
https://www.ibm.com/developerworks/library/wa-canvashtml5layering/index.html

css

et une fonction render appelée à chaque pas

voir les exports de inkscape en canevas HTML5


canvas : https://www.ibm.com/developerworks/library/wa-canvashtml5layering/index.html

canvas : https://www.w3schools.com/html/default.asp

paths : https://www.w3.org/TR/SVG/paths.html
/DIVERS/DOCS/HTML5-w3.org-paths.pdf

[bruno sanchiz]