Sébastien Roy, Université de Montréal
Sébastien Roy, Université de Montréal
6 mars 2023
Merci à Guy Lapalme et Louis Salvail pour avoir partager le matériel qu'ils ont monté pour IFT1005.
Le matériel de ce cours peut être réutilisé, sujet à la licence CC BY-SA 4.0.
a, b : active/désactive le dessin intéractif
z : efface le dessin
1, 2, 3 : rouge, vert, bleu8, 9, 0 : ligne moyenne, marqeur, ligne fineb!
<canvas>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<canvas>?
<canvas id="myCanvas" width="100" height="100" style="background-color:lightgray">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#FF0000";ctx.arc(50, 50, 40, 0, 2 * Math.PI);
ctx.strokeStyle = "green";
ctx.lineWidth=4; ctx.fillStyle = "yellow";
ctx.fill(); ctx.stroke();
</script>
<canvas>?<canvas> est un api javascript pour faire du dessin dans une page web.
<canvas>display: inline-block (comme un img)
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="100">
...
</svg>
En pratique, on laisse souvent tomber le xmlsn= et xmlns:xlink=.
viewBox)viewBox="xmin ymin width height".
<svg width="100" height="100" class="bg-gray">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="100" height="100" class="bg-gray" viewBox="0 0 400 400">
<circle cx="200" cy="200" r="160" stroke="green" stroke-width="16" fill="yellow" />
</svg>
preserveAspectRatio)
<svg width="200" height="100" class="bg-gray"
viewBox="0 0 100 100" preserveAspectRatio="xMidYmid meet">
...
</svg>
<svg width="200" height="100" class="bg-gray"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" >
...
</svg>
<svg width="200" height="100" class="bg-gray">
<defs>
<circle id="blub" cx="50" cy="50" r="40" ... />
</defs>
<svg x="0" y="0" width="100" height="100" > <use href="#blub"/> </svg>
<svg x="100" y="0" width="100" height="100" > <use href="#blub"/> </svg>
</svg>
rect)
<svg width="200" height="100 ">
<rect x="20" y="10" width="50" height="40" fill="red"/>
<rect x="100" y="20" width="45" height="60" rx="10" ry="10"/>
</svg>
x, y: position du coin haut-gaucherx, ry: rayon pour des coins arrondiscircle)
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
cx, cy: centre du cercler: rayon du cercleellipse)
<svg width="200" height="100" class="bg-gray">
<ellipse cx="100" cy="50" rx="80" ry="40" stroke="green" stroke-width="8" />
</svg>
cx, cy: centre du cerclerx, ry: rayons des deux axes<g>)
<svg height="100" width="200" >
<g fill="red" stroke-width="10" stroke="orange">
<circle cx="50" cy="50" r="40"/>
<circle cx="150" cy="50" r="30"/>
</g>
</svg>
line)
<svg height="100" width="100">
<line x1="10" y1="10" x2="90" y2="90" stroke-width="6" stroke="red" />
<line x1="10%" y1="90%" x2="90%" y2="10%" stroke-width="6" stroke="blue" />
</svg>
x1, y1: point de départ/li>
x2, y2: point d'arrivéestroke-linecap)stroke-linecap.butt, round, et square.
polyline)
<svg height="100" width="100">
<polyline points="10,10 10,90 90,10 90,90" stroke-width="6" stroke="blue" fill="red"/>
</svg>
points: x1,y1 x2,y2 x3,y3 ...polygon)
<svg height="100" width="100">
<polygon points="10,10 10,90 90,10 90,90" stroke-width="6" stroke="blue" fill="red"/>
</svg>
points: x1,y1 x2,y2 x3,y3 ...stroke-linejoin)stroke-linejoin.miter, round, et bevel.
path)path.
path)
<svg height="100" width="200">
<g stroke-width="6" stroke="blue" fill="red">
<polygon points="10,10 10,90 90,10 90,90"/>
<path d="M 110 10 L 110,90 L 190,10 L 190,90 Z" fill="orange"/>
</g>
</svg>
path)M 10 20: saute à la position 10,20L 10 20: dessine une ligne jusqu'à la position 10,20C x1 y1 x2 y2 x y: courbe bézier cubique qui termine en (x,y)S x1 y1 x y: courbe bézier cubique qui termine en (x,y)Q x1 y1 x y: courbe bézier quadratique qui se termine en (x,y)T x y: courbe bézier quadratique qui se termine en (x,y)Arx ry x-axis-rotation large-arc-flag sweep-flag x y: arc d'ellipseZ: ferme un cheminC et S )
<svg width="500" height="200" class="bg-gray" >
<path d="M100,100 C100,10 350,10 250,100 S400,190 400,100"
fill="none" stroke="red" stroke-width="5" />
</svg>
Q et T )
<svg width="500" height="200" class="bg-gray" >
<path d="M100,100 Q200,10 250,100 T400,100"
fill="none" stroke="red" stroke-width="5" />
</svg>
A )
<svg width="200" height="200" >
<g fill="none" stroke-width="8" >
<path d="M60,100 A50,50 0 0 0 140,100" stroke="red" />
<path d="M60,100 A50,50 0 1 0 140,100" stroke="green" />
<path d="M60,100 A50,50 0 0 1 140,100" stroke="blue" />
<path d="M60,100 A50,50 0 1 1 140,100" stroke="purple" />
</g>
</svg>
<svg width="200" height="100">
<circle cx="50" cy="50" r="40" fill="red"/>
<circle cx="150" cy="50" r="40" style="fill:red;"/>
</svg>
fill:rgb(255,0,0)stroke:rgb(255,0,0)stroke-width:4
<svg width="200" height="100">
<circle cx="50" cy="50" r="40" fill="blue" stroke="red" stroke-width="10" />
<circle cx="150" cy="50" r="40" fill="none" stroke="red"/>
</svg>
<defs> puis on y réfère avec le id.
<svg width="200" height="100" class="bg-gray">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color=rgb(255,255,0) />
<stop offset="100%" stop-color=rgb(255,0,0) />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color=rgb(0,255,0) />
<stop offset="100%" stop-color=rgb(0,0,255) />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad1)"/>
<circle cx="150" cy="50" r="40" fill="url(#grad2)"/>
</svg>
<svg height="100" width="200" >
<defs>
<radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad3)" />
<rect x="100" y="10" width="80" height="80" rx="10" ry="10" fill="url(#grad3)" />
</svg>
pattern
<svg height="100" width="200" class="bg-gray">
<defs>
<pattern id="pat1" patternUnits="userSpaceOnUse"
x="0" y="0" width="20" height="20" viewBox="0 0 10 10" >
<circle cx="5" cy="5" r="4" fill="red"/>
</pattern>
</defs>
<ellipse fill="url(#pat1)" stroke="black" stroke-width="5"
cx="100" cy="50" rx="80" ry="40" />
</svg>
text)
<svg width="200" height="100" >
<text x="50" y="50" fill="red" font-family="Verdana" font-size="64">
S
<tspan font-weight="bold" fill="orange" >V</tspan>
G!
</text>
</svg>
text)
<svg width="300" height="100" >
<path id="chemin" stroke="lightblue" stroke-width="6" fill="none"
d="M 50,50 C 100,0 200,100 260,50"/>
<text style="font: 24px sans-serif;">
<textPath href="#chemin">Un peu de texte...</textPath>
</text>
</svg>
image)
<svg width="100" height="100">
<image x="10" y="10" width="80" height="80" xlink:href="img/lovelogo.png"/>
</svg>
filter )
<svg height="140" width="240">
<defs>
<filter id="f3" x="-20%" y="-20%" width="150%" height="150%">
<feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="6" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<circle cx="90" cy="70" r="30" fill="red" filter="url(#f3)" />
<rect x="20" y="20" width="60" height="60" fill="yellow" filter="url(#f3)" />
</svg>
<svg width="100" height="100" class="bg-gray">
<a xlink:href="http://www.umontreal.ca" target="_blank">
<circle cx="50" cy="50" r="40" fill="green"/>
</a>
</svg>
transform )
<svg width="100" height="100" class="bg-gray">
<rect x="20" y="20" width="60" height="60" fill="red"
transform="rotate(45 50 50)"/>
</svg>
Ici, c'est rotate(angle cx cy).
transform )
transform="translate(80, 80) scale(1.5, 1.5) rotate(45)"
animate )animate dans l'élément.
<svg width="100" height="100" >
<rect x="20" y="20" width="60" height="60" fill="red">
<animate attributeName="height" from="50" to="70" dur="2s"
repeatCount="indefinite" />
</rect>
</svg>
animate )
<svg width="100" height="100" class="bg-gray">
<rect x="20" y="20" width="60" height="60" fill="red">
<animate attributeName="opacity" values="0;1;0" dur="3s"
repeatCount="indefinite" />
</rect>
</svg>
animate )
<svg width="100" height="100" class="bg-gray">
<rect x="20" y="20" width="60" height="60" fill="red">
<animate attributeName="opacity" dur="3s" repeatCount="indefinite"
values="0;1;0" keyTimes="0;0.2;1" />
<animate attributeName="fill" dur="3s" repeatCount="indefinite"
values="red;green;red" keyTimes="0;0.2;1" calcMode="discrete" />
</rect>
</svg>
animateTransform)
<svg width="100" height="100" class="bg-gray">
<rect x="20" y="20" width="60" height="60" fill="red"
transform="rotate(45 50 50)">
<animateTransform attributeName="transform" type="rotate" dur="15s"
from="0 50 50" to="360 50 50" repeatCount="indefinite" />
</rect>
</svg>
<svg width="400" height="100" class="bg-gray">
<path id="chemin2" stroke="lightblue" stroke-width="6" fill="none"
d="M 50,50 C 100,0 200,100 260,50 S 200,130 370,80"/>
<text style="font: 24px sans-serif;">
<textPath href="#chemin2" startOffset="0">Un peu de Texte...
<animate attributeName="startOffset" values="0%;100%;0%" dur="10s" repeatCount="indefinite"/>
</textPath>
</text>
</svg>
animateMotion)
<svg width="400" height="100" >
<path id="chemin3" stroke="lightblue" stroke-width="6" fill="none"
d="M 50,50 C 100,0 200,100 260,50 S 200,130 370,80"/>
<rect x="-10" y="-10" width="20" height="20" fill="red">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath href="#chemin3"/>
</animateMotion>
</rect>
</svg>
animateMotion)
<path id="chemin4" stroke="blue" stroke-width="6" fill="none"
d="M 50,50 C 100,0 200,100 260,50 Q 200,130 370,80">
<animate dur="3s" repeatCount="indefinite" attributeName="d"
to="M 50,80 C 100,100 100,80 260,50 Q 100,130 370,80"/>
</path>