Please enable JavaScript.
Coggle requires JavaScript to display documents.
canvas (les transformations (la sauvegarde du contexte (context.save(),…
canvas
les transformations
transparence
ctx.globalAlpha = ""
La translation
context.translate( translateX, translateY )
Le scale
context.scale( scaleX, scaleY)
La rotation
context.rotate( angle_radian )
la sauvegarde du contexte
context.save()
context.restore()
les images
Mise à l'échelle
context.drawImage(image, x, y, largeur, hauteur)
Recadrage
context.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur)
Les patterns
context.createPattern(image, type).
insertion d'un image
context.drawImage(image, x, y).
Ombrage
ctx.shadowOffsetX = ""
ctx.shadowBlur = ""
ctx.shadowOffsetY = ""
ctx.shadowColor = ""
animation
setTimeout()
setInterval()
requestAnimationFrame()
les contours
context.strokeRect(x, y, largeur, hauteur)
l'épaisseur du contour
context.lineWidth = "choisir un nombre"
les formes géométriques
les chemins simples
context.beginPath()
context.closePath()
context.moveTo()
context.lineTo()
context.stroke()
les arc
context.arc(x, y,rayon, angle depart,angle fin,senseinverse);
déplacement d'un crayon
context.moveTo(x, y);
le texte
context.fillText("text", x, y);
context.font="choisir font"
lignes et dégradés
Les styles de lignes
Les extrémités
context.lineCap=""
butt ( par défaut)
square
round
Les intersections
context.lineJoin = ""
miter(valeur par défaut)
round
bevel
Les dégradés
var linear = new context.createLinearGradient(debutx, debuty, finx, finy);
linear.addColorStop(position, couleur)
Dégradés radiaux
var radial=createRadialGradient(centreX, centreY, centreRayon, finX, finY, finRayon)
Contrôle clavier et souris
Souris
click, dblclick, mousedown,
mouseup, mousemove, mouseenter et mouseleave
Clavier
keypress, keyup ,
keydown
traçage d'un rectangle
context.fillrect(x, y, largeur, hauteur)
style
context.fillStyle = "choisir couleur"
suppression
context.clearRect(x, y, largeur,hauteur)
Composition
ctx.globalCompositeOperation =""
Masque
ctx.clip()