//Le carré basique
class Carre {
constructor(x, y, largeur, hauteur, couleur) {
this.x = x;
this.y = y;
this.largeur = largeur;
this.hauteur = hauteur;
this.couleur = couleur;
}
draw() {
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.couleur;
ctx.fillRect(this.x, this.y, this.largeur, this.hauteur);
ctx.closePath();
ctx.restore();
}
}
//Fin de la création de l'objet
//
//Nouveau Carre(x,y,largeur,hauteur,couleur);
var Carres = new Carre(0, 0, 350, 350, "black");
//Dessin du carré dans le contexte :)
Carres.draw(ctx);
//Le carré basique en contour
class Carre {
constructor(x, y, largeur, hauteur, epaisseur, couleur) {
this.x = x;
this.y = y;
this.largeur = largeur;
this.hauteur = hauteur;
this.epaisseur = epaisseur;
this.couleur = couleur;
}
draw() {
ctx.save();
ctx.beginPath();
ctx.lineWidth = this.epaisseur;
ctx.strokeStyle = this.couleur;
ctx.strokeRect(this.x, this.y, this.largeur, this.hauteur);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
var Carres = new Carre(0, 0, 350, 350, 10, "black");
Carres.draw(ctx);
//Le carré basique avec une rotation
class Carre {
constructor(x, y, largeur, hauteur, epaisseur, rotation, couleur) {
this.x = x;
this.y = y;
this.largeur = largeur;
this.hauteur = hauteur;
this.epaisseur = epaisseur;
this.rotation = rotation;
this.couleur = couleur;
}
draw() {
ctx.save();
ctx.beginPath();
ctx.translate(CanvasWidth / 2, 0);
ctx.rotate(this.rotation * Math.PI / 180);
ctx.lineWidth = this.epaisseur;
ctx.strokeStyle = this.couleur;
ctx.strokeRect(this.x, this.y, this.largeur, this.hauteur);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
var Carres = new Carre(0, 0, 350, 350, 10, 45, "black");
Carres.draw(ctx);
//Le cercle basique
class Cercle {
constructor(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.fillStyle = this.color;
ctx.fill();
}
}
var Cercles = new Cercle(CanvasWidth / 2, CanvasHeight / 2, CanvasWidth / 2 - 20, "black");
Cercles.draw(ctx);
//Le cercle basique en contour
class Cercle {
constructor(x, y, radius, color, lineWidth) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.lineWidth = lineWidth;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.color;
ctx.stroke();
}
}
var Cercles = new Cercle(CanvasWidth / 2, CanvasHeight / 2, CanvasWidth / 2 - 20, "black", 40);
Cercles.draw(ctx);
// Un demi cercle
class DemiCercle {
constructor(x, y, radius, color, lineWidth) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.lineWidth = lineWidth;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI, true);
ctx.fillStyle = this.color;
ctx.fill();
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.color;
ctx.stroke();
}
update() {
this.draw();
this.x = this.x + this.velocity.x;
this.y = this.y + this.velocity.y;
}
}
var DemiCercle1 = new DemiCercle(CanvasWidth / 2, CanvasHeight / 2, CanvasWidth / 2 - 20, "black", 40);
DemiCercle1.draw(ctx);
//Le triangle
class Triangle {
constructor(x, y, side, fill, stroke, line, velocity) {
this.x = x;
this.y = y;
this.side = side;
this.fill = fill;
this.stroke = stroke;
this.line = line;
this.velocity = velocity;
}
draw() {
ctx.save();
var height = this.side * (Math.sqrt(3) / 2);
ctx.lineWidth = this.line;
ctx.strokeStyle = this.stroke;
ctx.fillStyle = this.fill;
ctx.translate(this.x, this.y);
ctx.beginPath();
ctx.moveTo(0, -height / 2);
ctx.lineTo(-this.side / 2, height / 2);
ctx.lineTo(this.side / 2, height / 2);
ctx.lineTo(0, -height / 2);
ctx.fill();
ctx.closePath();
ctx.restore();
}
update() {
this.draw();
this.x += this.velocity.x;
this.y += this.velocity.y;
}
}
var Triangles = new Triangle(CanvasWidth / 2, CanvasHeight / 2, CanvasWidth, "black", "red", 20, 0);
Triangles.draw(ctx);
//Les étoiles
class Etoiles {
constructor(centerX, centerY, points, outer, inner, fill, stroke, line, velocity) {
this.centerX = centerX;
this.centerY = centerY;
this.points = points;
this.outer = outer;
this.inner = inner;
this.fill = fill;
this.stroke = stroke;
this.line = line;
this.velocity = velocity;
}
draw() {
ctx.save();
ctx.beginPath();
ctx.moveTo(this.centerX, this.centerY + this.outer);
for (var i = 0; i < 2 * this.points + 1; i++) {
var r = (i % 2 == 0) ? this.outer : this.inner;
var a = Math.PI * i / this.points;
ctx.lineTo(this.centerX + r * Math.sin(a), this.centerY + r * Math.cos(a));
};
ctx.closePath();
// draw
ctx.fillStyle = this.fill;
ctx.fill();
ctx.strokeStyle = this.stroke;
ctx.lineWidth = this.line;
ctx.stroke();
ctx.restore();
}
update() {
this.draw();
this.inner += this.velocity.x;
}
}
var LesEtoiles = new Etoiles(CanvasWidth / 2, CanvasHeight / 2, 6, 200, 100, "black", "black", 20, 0);
LesEtoiles.draw(ctx);
//Un arbre rond
class ArbreRond {
constructor(x, x2, y, y2, width, height, color, color2, velocity, radius) {
this.x = x;
this.x2 = x2;
this.y = y;
this.y2 = y2;
this.width = width;
this.height = height;
this.color = color;
this.color2 = color2;
this.velocity = velocity;
this.radius = radius;
}
draw() {
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.color2;
ctx.arc(this.x2, this.y2, this.radius, 0, Math.PI * 2, false);
ctx.fill();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();
}
update() {
this.draw();
this.x = this.x + this.velocity.x;
this.y = this.y + this.velocity.y;
}
}
var UnArbreRond = new ArbreRond(CanvasWidth / 2 - 20, CanvasWidth / 2, CanvasHeight / 3, CanvasHeight / 3, 40, 400, "brown", "green", 0, 150);
UnArbreRond.draw(ctx);
//Un sapin
class Sapin {
constructor(x, y, x2, y2, side, fill, fill2, line, width, height, velocity) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.side = side;
this.fill = fill;
this.fill2 = fill2;
this.line = line;
this.width = width;
this.height = height;
this.velocity = velocity;
}
draw() {
var numbers = 0;
for (numbers = 0; numbers < 3; numbers++) {
ctx.save();
ctx.fillStyle = this.fill2;
var height = this.side * (Math.sqrt(3) / 2);
ctx.lineWidth = this.line;
ctx.strokeStyle = this.stroke;
ctx.translate(this.x2, this.y2 + numbers * 70);
ctx.beginPath();
ctx.moveTo(0, -height / 2);
ctx.lineTo(-this.side / 2, height / 2);
ctx.lineTo(this.side / 2, height / 2);
ctx.lineTo(0, -height / 2);
ctx.fill();
ctx.closePath();
ctx.restore();
}
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.fill;
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();
}
update() {
this.draw();
this.x = this.x + this.velocity.x;
this.y = this.y + this.velocity.y;
}
}
var UnSapin = new Sapin(CanvasWidth / 2 - 20, CanvasHeight / 2, CanvasWidth / 2, CanvasHeight / 3 - 50, 200, "brown", "green", 10, 40, 300, 0);
UnSapin.draw(ctx);
//Un arbre carre
class ArbreCarre {
constructor(x, x2, y, y2, width, width2, height, height2, color, color2, velocity) {
this.x = x;
this.x2 = x2;
this.y = y;
this.y2 = y2;
this.width = width;
this.width2 = width2;
this.height = height;
this.height2 = height2;
this.color = color;
this.color2 = color2;
this.velocity = velocity;
}
draw() {
ctx.save();
// ctx.globalCompositeOperation = "darken";
ctx.beginPath();
ctx.fillStyle = this.color2;
ctx.fillRect(this.x2, this.y2, this.width2, this.height2);
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();
}
update() {
this.draw();
this.x = this.x + this.velocity.x;
this.y = this.y + this.velocity.y;
}
}
var UnArbreCarre = new ArbreCarre(CanvasWidth / 2 - 20, CanvasWidth / 2 - 150, CanvasHeight / 3, CanvasHeight / 3 - 100, 40, 300, 400, 400 - 200, "brown", "green", 0, 150);
UnArbreCarre.draw(ctx);
//Personnage
class Personnage {
constructor(xTete, yTete, yCorps, yPieds, widthTete, widthCorps, widthPieds, heightCorps, heightPieds, colorCorps, colorTete, hairColor) {
this.xTete = xTete;
this.yTete = yTete;
this.yCorps = yCorps;
this.yPieds = yPieds;
this.widthTete = widthTete;
this.widthCorps = widthCorps;
this.widthPieds = widthPieds;
this.heightCorps = heightCorps;
this.heightPieds = heightPieds;
this.colorTete = colorTete;
this.colorCorps = colorCorps;
this.hairColor = hairColor
}
draw() {
ctx.beginPath();
ctx.fillStyle = this.hairColor;
var Cheveux = 30;
ctx.fillRect(this.xTete - Cheveux, this.yTete - Cheveux * 3, this.widthTete + Cheveux * 4, this.widthTete + Cheveux * 6);
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.colorTete;
ctx.arc(this.xTete + this.widthTete, this.yTete, this.widthTete, 0, Math.PI * 2, false);
ctx.fill();
ctx.fillStyle = this.colorCorps;
ctx.fillRect(this.xTete, this.yCorps, this.widthCorps, this.heightCorps);
ctx.fillRect(this.xTete, this.yPieds, this.widthPieds, this.heightPieds);
ctx.fillRect(this.xTete + this.widthCorps - this.widthPieds, this.yPieds, this.widthPieds, this.heightPieds);
ctx.restore();
}
}
var widthTete = 60;
var widthCorps = widthTete * 2;
var widthPieds = widthTete / 2;
var heightCorps = widthCorps * 2;
var heightPieds = widthTete * 3;
var posYperso = CanvasHeight / 2 - 160;
var posXperso = CanvasWidth / 2 - 50;
var yCorps = posYperso + widthTete;
var yPieds = posYperso + heightCorps;
var Personnage = new Personnage(
posXperso,
posYperso,
yCorps,
yPieds,
widthTete,
widthCorps,
widthPieds,
heightCorps,
heightPieds,
"#a0b8b4",
"#e57158",
"black");
Personnage.draw();
//Personnage2
class Bucheron {
constructor(xTete, yTete, yCorps, yPieds, widthTete, widthCorps, widthPieds, heightCorps, heightPieds, colorCorps, colorTete) {
this.xTete = xTete;
this.yTete = yTete;
this.yCorps = yCorps;
this.yPieds = yPieds;
this.widthTete = widthTete;
this.widthCorps = widthCorps;
this.widthPieds = widthPieds;
this.heightCorps = heightCorps;
this.heightPieds = heightPieds;
this.colorTete = colorTete;
this.colorCorps = colorCorps;
}
draw() {
ctx.beginPath();
ctx.fillStyle = "orange";
// basCasque
var Casque = 50;
ctx.fillRect(this.xTete - Casque / 2, this.yTete - Casque, this.widthTete + Casque * 2, this.widthTete);
// hautCasque
ctx.arc(this.xTete + this.widthTete, this.yTete - Casque, this.widthTete, 0, Math.PI * 2, false);
ctx.fill();
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.colorTete;
ctx.arc(this.xTete + this.widthTete, this.yTete, this.widthTete, 0, Math.PI * 2, false);
ctx.fill();
// ctx.fillRect(this.xTete, this.yTete, this.widthTete, this.heightTete);
ctx.fillStyle = this.colorCorps;
ctx.fillRect(this.xTete, this.yCorps, this.widthCorps, this.heightCorps);
ctx.fillRect(this.xTete, this.yPieds, this.widthPieds, this.heightPieds);
ctx.fillRect(this.xTete + this.widthCorps - this.widthPieds, this.yPieds, this.widthPieds, this.heightPieds);
ctx.restore();
}
}
// Quadrillage
// Create a pattern, offscreen
const patternCanvas = document.createElement('canvas');
const patternContext = patternCanvas.getContext('2d');
// Give the pattern a width and height of 50
patternCanvas.width = 50;
patternCanvas.height = 50;
// Give the pattern a background
patternContext.fillStyle = "orange";
patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
patternContext.fillStyle = "#cc7a30";
patternContext.fillRect(0, 0, 10, 100)
patternContext.fillRect(0, 0, 100, 10)
patternContext.stroke();
patternGrille = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = patternGrille;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
var widthTete = 55;
var widthCorps = widthTete * 2;
var widthPieds = widthTete / 2;
var heightCorps = widthCorps * 2;
var heightPieds = widthTete * 3;
var posYperso = CanvasHeight / 2 - 140;
var posXperso = CanvasWidth / 2 - 50;
var yCorps = posYperso + widthTete;
var yPieds = posYperso + heightCorps;
var Bucherons = new Bucheron(
posXperso,
posYperso,
yCorps,
yPieds,
widthTete,
widthCorps,
widthPieds,
heightCorps,
heightPieds,
patternBucheron,
"#e57158");
Bucherons.draw();
// Quadrillage
// Create a pattern, offscreen
const patternCanvas = document.createElement('canvas');
const patternContext = patternCanvas.getContext('2d');
// Give the pattern a width and height of 50
patternCanvas.width = 50;
patternCanvas.height = 50;
// Give the pattern a background
patternContext.fillStyle = "orange";
patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
patternContext.fillStyle = "#cc7a30";
patternContext.fillRect(0, 0, 10, 100)
patternContext.fillRect(0, 0, 100, 10)
patternContext.stroke();
patternGrille = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = patternGrille;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);