home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

ทำให้รูปภาพขยายเมื่อ hover บน HTML5 Canvas

เพื่อทำให้รูปภาพขยายเมื่อ hover ให้ใช้ไลบรารี Vanilla JavaScript

เมื่อเมาส์เคลื่อนที่ ตั้งค่าดังนี้:

function move(e) {
  var pos = getMousePos(myCanvas, e);
  context.drawImage(img, -pos.x, -pos.y, img.width, img.height);
}

สำหรับ Canvas:

// add event listener we need
myCanvas.addEventListener('mouseout', display, false);
myCanvas.addEventListener('mousemove', move, false);


function display() {
  context.drawImage(img, 0, 0, img.width>>1, img.height>>1);
}