JavaScript 30 — День 8 Учебные заметки

День 8 JavaScript 30 Веса Боса познакомил меня с HTML5 Canvas, который представляет собой API, позволяющий вам рисовать дизайны на веб-странице как статически, так и динамически. Он также может делать анимацию. Бос сделал простое приложение для динамического рисования и не занимался анимацией.

Если вам нужен более полный курс по HTML 5 Canvas, посмотрите Ускоренный курс HTML5 Canvas Брэда Тревези на YouTube.

Для начала нам нужно получить доступ к API. Это делается в теле HTML-кода. Также задается размер полотна.

<canvas id="draw" width="800" height="800">/canvas>

Теперь в тегах script Бос устанавливает контексты холста.

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle ='#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 100;
ctx.globalCompositeOperation = 'multiply'; //blend mode

Добавление прослушивателей событий для обнаружения движения мыши.

canvas.addEventListener('mousemove',draw);
canvas.addEventListener('mouseup', ()=> isDrawing = false);
canvas.addEventListener('mouseout', ( )=> isDrawing = false);

Передача события в функцию.

function draw(e) {
   if(!isDrawing) return; //stop function
   ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; //color spectrum
   ctx.beginPath(); //start drawing 
   ctx.moveTo(lastX, lastY);  //start drawing from
   ctx.lineTo(e.offsetX, e.offsetY);  //go to
   ctx.stroke(); 
   [lastX, lastY]=[e.offsetX,e.offsetY]; //resests start point
   hue++; //increments hue setting
   if(hue >= 360){
      hue = 0; //resets hue
   }
   if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1){
      direction = !direction;
   }  //increments line width
    if(direction){
       ctx.lineWidth++;
    }else {
       ctx.lineWidth--;
    }  //line width increments with directional change
}

HTML5 Canvas в новинку для меня. Я с нетерпением жду, чтобы узнать больше и создать что-то интересное в ближайшее время.

Посмотрите другие посты из этой серии.