Beispielanwendung

Anwendung bisheriger Themen
farbige Kreise durch Klick auf Canvas zeichnen und speichern

HTML<input id="color" type="color" />
<canvas id="canvas" width="300px" , height="200px" />

CSS#canvas {
  border: 1px solid;
}

1. Schritt: Bei Klick auf Canvas farbigen Kreis zeichnen:

JavaScriptconst canvas = document.getElementById('canvas');
canvas.addEventListener('click', drawDot);
function drawDot(event) {
  const color = document.getElementById('color');
  const canvas = event.currentTarget;
  const ctx = canvas.getContext('2d');
  const x = event.x - canvas.offsetLeft;
  const y = event.y - canvas.offsetTop;
  ctx.fillStyle = color.value;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fill();
}

2. Schritt: Code für Kreise in Klasse auslagern:

JavaScriptclass Dot {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.arc(this.x, this.y, 10, 0, 2 * Math.PI);
    ctx.fill();
  }
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.addEventListener('click', drawDot);
function drawDot(event) {
  const color = document.getElementById('color');
  const x = event.x - canvas.offsetLeft;
  const y = event.y - canvas.offsetTop;
  const newDot = new Dot(x, y, color.value);
  newDot.draw(ctx);
}

3. Schritt: Gezeichnete Kreise in localStorage speichern:

JavaScriptclass Dot {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.arc(this.x, this.y, 10, 0, 2 * Math.PI);
    ctx.fill();
  }
}

class Dots {
  constructor(storageKey = 'dots') {
    this.storageKey = storageKey;
    this.dots = [];
    const dotsJSON = localStorage.getItem(storageKey) || '[]';
    for (let dot of JSON.parse(dotsJSON)) {
      this.dots[this.dots.length] = new Dot(dot.x, dot.y, dot.color);
    }
  }

  storeDot(dot) {
    this.dots[this.dots.length] = dot;
    localStorage.setItem(this.storageKey, JSON.stringify(this.dots));
  }

  drawDots(ctx) {
    for (let dot of this.dots) {
      dot.draw(ctx);
    }
  }
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const dots = new Dots();
dots.drawDots(ctx);
canvas.addEventListener('click', drawDot);
function drawDot(event) {
  const color = document.getElementById('color');
  const x = event.x - canvas.offsetLeft;
  const y = event.y - canvas.offsetTop;
  const newDot = new Dot(x, y, color.value);
  newDot.draw(ctx);
  dots.storeDot(newDot);
}

4. Schritt: Alle Kreise über zusätzlichen Button löschen:

JavaScriptclass Dot {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.arc(this.x, this.y, 10, 0, 2 * Math.PI);
    ctx.fill();
  }
}

class Dots {
  constructor(storageKey = 'dots') {
    this.storageKey = storageKey;
    this.dots = [];
    const dotsJSON = localStorage.getItem(storageKey) || '[]';
    for (let dot of JSON.parse(dotsJSON)) {
      this.dots[this.dots.length] = new Dot(dot.x, dot.y, dot.color);
    }
  }

  storeDot(dot) {
    this.dots[this.dots.length] = dot;
    localStorage.setItem(this.storageKey, JSON.stringify(this.dots));
  }

  clearDots() {
    this.dots = [];
    localStorage.removeItem(this.storageKey);
  }

  drawDots(ctx) {
    for (let dot of this.dots) {
      dot.draw(ctx);
    }
  }
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const dots = new Dots();
dots.drawDots(ctx);
canvas.addEventListener('click', drawDot);
function drawDot(event) {
  const color = document.getElementById('color');
  const x = event.x - canvas.offsetLeft;
  const y = event.y - canvas.offsetTop;
  const newDot = new Dot(x, y, color.value);
  newDot.draw(ctx);
  dots.storeDot(newDot);
}

const clearButton = document.createElement('button');
clearButton.textContent = 'X';
canvas.parentNode.insertBefore(clearButton, canvas);
clearButton.addEventListener('click', clearCanvas);

function clearCanvas(event) {
  dots.clearDots();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}