mousemove

🎨drawing

let isDrawing = false;
let x = 0;
let y = 0;

const myPics = document.getElementById('myPics');
const context = myPics.getContext('2d');

// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
myPics.addEventListener('mousedown', e => {
    x = e.offsetX;
    y = e.offsetY;
    isDrawing = true;
});

myPics.addEventListener('mousemove', e => {
    if(isDrawing === true) {
        drawLine(context, x, y, e.offsetX, e.offsetY);
        x = e.offsetX;
        y = e.offsetY;
    }
});

window.addEventListener('mouseup', e => {
    if(isDrawing === true) {
        drawLine(context, x, y, e.offsetX, e.offsetY);
        x = 0;
        y = 0;
        isDrawing = false;
    }
});

function drawLine (context, x1, y1, x2, y2) {
    context.beginPath();
    context.strokeStyle = 'black';
    context.lineWidth = 1;
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
    context.closePath();
}

🏝img

const pageContainer = document.querySelector('.page-container');
const pageBack = document.querySelector('.page-back');

// 현재 화면(Viewport)의 크기
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

pageContainer.addEventListener('mousemove', function(e){
    // mousemove 이벤트 객체의 pageX, pageY가 좌표값
    // moveX, moveY는 중앙이 기준으로 `+ <-x-> -` 보통의 x,y 좌표의 y축 기준 거울상.
    const moveX = ((windowWidth/2) - e.pageX) * 0.1;
    const moveY = ((windowHeight/2) - e.pageY) * 0.1;

    // pageBack.style.marginLeft = `${moveX}px`;
    // pageBack.style.marginTop = `${moveY}px`;
  
    pageBack.style.transform = `translate(${moveX}px, ${moveY}px)`;
})