Практика Canvas | 1 урок

Canvas — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript. В этой статье, я на практике покажу применение canvas.

Практика Canvas | 1 урок

Разметка HTML


<body style="margin:0;">
<canvas id="canvas" style="display:block;">Text</canvas>

JavaScript

Теперь приступает к JavaScript.


 var 
  canv = document.getElementById('canvas'),
  ctx = canv.getContext('2d'),
  isMouseDown = false;
  cords = [];
       
 canv.width = window.innerWidth;
 canv.height = window.innerHeight;
 

В этом коде мы сначала создали переменную canv, дальше мы создали "контекс", и указали, что мы создали двумерный "контекс". Потом мы указали, что canvas у нас будет на весь экран.

Приступим к коду для рисования.


  canv.addEventListener("mousedown", function() {
  isMouseDown = true;
 });
  canv.addEventListener("mouseup", function() {
    isMouseDown = false;
    ctx.beginPath();
    cords.push('mouseup');
 });
    ctx.lineWidth = 10;
     canv.addEventListener("mousemove", function(e) {
   if (isMouseDown) 
     cords.push([e.clientX, e.clientY]);
     ctx.lineTo(e.clientX, e.clientY);
     ctx.stroke();
                   
     ctx.beginPath();
     ctx.arc(e.clientX, e.clientY, 10, 0, Math.Pi * 2);    
     ctx.fill();
       
     ctx.beginPath();
     ctx.moveTo(e.clientX, e.clientY);
  }
 });
 

В начале кода, мы создали переменную isMouseDown = false.Мы ее создали, потому что при рисовании без isMouseDown, у нас получаются пробелы, когда мы быстро рисуем.Дальше мы проверили, если isMouseDown, то тогда мы рисуем. И у нас получилось, что когда мы зажимаем мышь, то тогда у нас рисуется.Но у нас все равно получились проблемы при рисовании, и решили мы эту проблему кодом, который мы написали дальше.

Теперь сделаем кнопки, которые по клику будет выполнять функцию сохранения, очищения и воспроизведения.


  document.addEventListener("keydown", function(e) {
  if (e.keyCode == 83) {
  save();
  console.log('saved');
 }
  if (e.keyCode == 82) {
  console.log('replaying');
  cords = JSON.parse(localStorage.getItem('cords'))
                   
  clear();
  replay();
 }
  if (e.keyCode == 67) {
  clear();
  console.log('cleared');
  }
 });
 

Теперь мы проверяем, если была нажата кнопка S (она под цифрой 83), то мы выполняем функцию сохранения, если нажата кнопка R (она под цифрой 82), то мы выполняем функцию воспроизведение нарисованного и последняя проверка на очищение всего нарисованного (кнопка C).

Функции.


 function save() {
 localStorage.setItem('cords', JSON.stringify(cords));
}
           
 function clear() {
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canv.width, canv.height);
  ctx.beginPath();
  ctx.fillStyle = 'black';
 }
           
 function replay() {
  var 
  timer = setInterval(function() {
 if (!cords.length) {
  clearInterval(timer);
  ctx.beginPath();
  return;
 }
  var 
   crd = cords.shift(),
  e = {
   clientX: crd["0"],
   clientY: crd["1"]
 };
   ctx.lineTo(e.clientX, e.clientY);
   ctx.stroke();
                 
   ctx.beginPath();
   ctx.arc(e.clientX, e.clientY, 10, 0, Math.Pi * 2);      
   ctx.fill();
       
   ctx.beginPath();
   ctx.moveTo(e.clientX, e.clientY);
 }, 30);
 

Мы сделали функции сохранения, очищения и воспроизведения.Сохранятся у нас будет все в localStorage. И для того чтобы воспроизвести что-то, нам надо будет сначала сохранить, а потом уже воспроизводить