Please enable JavaScript.
Coggle requires JavaScript to display documents.
Canvas (Principe d’utilisation (Récupération dans une variable cet élément…
Canvas
Principe d’utilisation
Récupération dans une variable cet élément
var a_canvas = document.getElementById("a");
Récupérer le contexte graphique du canvas pour dessiner
var a_context = a_canvas.getContext("2d");
Déclarer le canvas
<canvas id="a" width="300" height="225"></canvas>
Dessiner à l’aide du contexte graphique
b_context.fillRect(50, 25, 150, 100);
formes géométriques
Rectangle
fillrect(x, y, largeur, hauteur).
clearRect(x, y, largeur,hauteur)
cercle
arc(x, y,rayon, angleDepart, angleFin, sensInverse)
Les chemins simples
moveTo()
lineTo()
closePath()
stroke()
beginPath()
fill()
closePath()
les styles
styles sur les formes
context.strokeStyle = "gold";
context.lineWidth = "5";
context.fillStyle = "gold";
styles sur les lignes
context.lineWidth = 10;
context.lineCap = '(round/ square/butt )';
context.lineJoin = '(round/beve/miter)';
Les images
Mise à l'échelle
drawImage(image, x, y, largeur, hauteur)
Recadrage
drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur)
Les images
drawImage(image, x, y).
Les patterns
createPattern(image, type)
Animation
setInterval()
requestAnimationFrame(
setTimeout()
Les dégradés
createLinearGradient()
var linear = context.createLinearGradient(0, 0, 0, 150); linear.addColorStop(0, 'white');
createRadialGradient()
var radial = context.createRadialGradient(75, 75, 0, 130, 130, 150) ;
radial.addColorStop(0, '#1791a7');
sauvegarde et restauration du contexte
context.save()
context.restore()
Contrôle clavier et souris
Souris
moncanvas.onmousedown = function(e)
moncanvas. dblclick = function(e)
moncanvas.click = function(e)
moncanvas.mouseenter= function(e)
moncanvas.mouseup= function(e)
moncanvas.mouseleave= function(e)
moncanvas. mousemove= function(e)
Clavier
document.body.keyup= dessiner;
document.body.onkeydown = dessiner;
document.body.keypress= dessiner;
le texte
context.fillText("js", 78, 92);
context.font = "bold 22pt Calibri,Geneva,Arial";
transparence
context.globalAlpha = 0.5;
La translation
context.translate( translateX, translateY );
Le scale :
context.scale( scaleX, scaleY);
La rotation :
context.rotate( angle_radian );
Composition
ctx.globalCompositeOperation = "(source-over/ource-atop,/source-in /source-out/ source-over/ destination-atop/ destination-in/ destination-out/ destination-over/ lighter ";
Ombrage
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 15;
ctx.shadowColor = 'rgba(204,69,228,1)';
Masque
clip()