HTML5 畫布是一種標準的 Web 技術，用于繪制圖形、動畫、視頻等。其中一項有趣的功能是放大鏡，我們可以使用畫布的 API 創建一個放大鏡，以便讓用戶更方便地觀察圖像的細節。

// 創建畫布對象
var canvas = document.getElementById("canvas");
// 創建上下文對象
var ctx = canvas.getContext("2d");
// 繪制圖片
var img = new Image();
img.onload = function() {
ctx.drawImage(img,0,0);
}
img.src = "image.jpg";
// 創建放大鏡
var magnifier = document.createElement("div");
magnifier.style.width = "200px";
magnifier.style.height = "200px";
magnifier.style.backgroundImage = "url(image.jpg)";
magnifier.style.backgroundSize = "1000px 1000px";
magnifier.style.position = "absolute";
magnifier.style.display = "none";
document.body.appendChild(magnifier);
// 鼠標移動事件
canvas.addEventListener("mousemove", function(e){
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
magnifier.style.left = (x - 100) + "px";
magnifier.style.top = (y - 100) + "px";
magnifier.style.display = "block";
magnifier.style.backgroundPosition = (-x*5 + 100) + "px " + (-y*5 + 100) + "px";
});
// 鼠標離開事件
canvas.addEventListener("mouseleave", function(){
magnifier.style.display = "none";
});

這段代碼創建了一個 canvas 元素，載入一張圖像，然后創建了一個 div 元素作為放大鏡，當鼠標移動到畫布上時，在放大鏡區域內顯示圖像的細節。具體實現方法是利用鼠標的位置來設置放大鏡的位置和背景圖片偏移量，從而達到放大鏡的放大效果。