DAY 7
0
Modern Web

## 路徑和位移

### context.drawImage 方法

• RATIO: 畫布和實際畫面的比例
• WIDTH、HEIGHT: 畫布的寬高 (= 實際畫面 * RATIO)

``````let mouseImg = new Image();
mouseImg.src = "../mouse.png";
let mouseX = 0, mouseY = 0;
let Rect = canvas.getBoundingClientRect();
mouseX = (e.pageX - Rect.left) * RATIO;
mouseY = (e.pageY - Rect.top) * RATIO;
}, false);
function MouseAnime(){
context.drawImage(MouseImg, mouseX, mouseY);
}
``````

pageX, pageY 對應到的實際畫面大小，計算其在畫布上的相對位置，要乘上我們當時設計的 RATIO

``````if(window.innerWidth < 992)
let Rect = canvas.getBoundingClientRect();
mouseX = (e.touches[0].pageX - Rect.left) * RATIO;
mouseY = (e.touches[0].pageY - Rect.top) * RATIO;
}, false);
``````

### 題外話：Image類名

``````mouseImg.onload = () => {
AnimationLoop();
}
``````

``````function MouseAnime(){
if(MouseImg.complete) context.drawImage(mouseImg, mouseX, mouseY);
}
``````

``````function MouseAnime(){
if(mouseImg.width) return;　// 若寬度為0，表示圖片來源未正確設定，直接中斷

if(MouseImg.complete) context.drawImage(mouseImg, mouseX, mouseY);
else context.drawImage(MouseImg, mouseX, mouseY);
}
``````

### 回歸正傳

``````function MouseAnime(){
let size = WIDTH * 0.1;
context.drawImage(mouseImg, mouseX-size/2, mouseY-size/2, size, size);
}
``````

``````context.drawImage(mouseImg, 0, 0, mouseImg.width, mouseImg.height,
mouseX-size/2, mouseY-size/2, size, size);
``````

↑這邊也同步提供第三種格式給大家參考，前面四個參數可以讓你對圖片進行裁切，不過我個人是不建議把事情做得這麼複雜，最好的方式是在製作素材的時候就先設計好寬高的比例，然後取得寬高比，這樣，不論是什麼圖片，都不用重新做設定：

``````function MouseAnime(){
let imgRatio = mouseImg.height / mouseImg.width;
let w = WIDTH * 0.1;
let h = WIDTH * 0.1 * imgRatio;
context.drawImage(mouseImg, mouseX-w/2, mouseY-h/2, w, h);
}
``````

### 如果這樣做...

• 位移 = 距離 - 緩衝
• 位移 = 每次移動5格

``````function MouseAnime(){
cursorX+= (mouseX - cursorX) / 5;
cursorY+= (mouseY - cursorY) / 5;
let size = WIDTH * 0.1;
context.drawImage(mouseImg, cursorX-size/2, cursorY-size/2, size, size);
}
``````

``````cursorX = (cursorX * 4 + mouseX) / 5;
cursorY = (cursorY * 4 + mouseY) / 5;
``````

``````let isPathing = false;
canvas.addEventListener('mousedown', () => isPathing = true);
canvas.addEventListener('mouseup', () => isPathing = false);
canvas.addEventListener('mouseout', () => isPathing = false);
function GetMouse(e){
let Rect = canvas.getBoundingClientRect();
mouseX = (e.pageX - Rect.left) * RATIO;
mouseY = (e.pageY - Rect.top) * RATIO;
}
function MouseAnime(){
if(!isPathing){
cursorX+= (mouseX - cursorX) / 5;
cursorY+= (mouseY - cursorY) / 5;
}
let size = WIDTH * 0.1;
context.drawImage(mouseImg, cursorX-size/2, cursorY-size/2, size, size);
}
``````

``````let period = 0, timer = 0;
let distanceX = 0, distanceY = 0;
function GetDistance(){
distanceX = (mouseX - cursorX);
distanceY = (mouseY - cursorY);
period = 90;
timer = 90;
isPathing = false;
}
function MouseAnime(){
if(!isPathing){
if(timer > 0){
cursorX+= distanceX / period;
cursorY+= distanceY / period;
timer--;
}
else{
cursorX+= (mouseX - cursorX) / 5;
cursorY+= (mouseY - cursorY) / 5;
}
}
let size = WIDTH * 0.1;
context.drawImage(mouseImg, cursorX-size/2, cursorY-size/2, size, size);
}
``````