跟隨畫布光標的放大鏡

Question

我正在為我的一個客戶設計 T 恤設計師，我使用 html5 畫布制作了它。 襯衫設計師現在已經完成了，但他要求我添加一個放大鏡（類似這樣： http : //mlens.musings.it/ ）。 我在那里發現了很多類似的腳本，但是，它們似乎都有一個共同點，它們使用小圖像和大圖像。 然而，使用畫布，我有一個不同的場景，並且一直困擾着我如何添加一個放大鏡來放大光標在畫布上的任何地方。

是否有任何腳本可以完成此任務？ 或者我還有什么其他選擇？

Answer 1

讓我們將畫布繪制到另一個畫布上但進行縮放。

小提琴示例

context.drawImage允許我們指定我們想要獲得多少原始畫布以及在目標畫布上繪制它的大小。 因此，要進行 2 倍縮放，我們只需將兩倍大小的原始畫布繪制到目標畫布。

var main = document.getElementById("main");
var zoom = document.getElementById("zoom");
var ctx = main.getContext("2d")
var zoomCtx = zoom.getContext("2d");
var img = new Image();
img.src = "http://astrobioloblog.files.wordpress.com/2011/10/duck-1.jpg"
img.onload = run;

function run(){
    ctx.drawImage(img,0,0);
}

main.addEventListener("mousemove", function(e){
    //console.log(e);
    zoomCtx.drawImage(main, e.x, e.y, 200, 100, 0,0, 400, 200);
    zoom.style.top = e.pageY + 10+ "px"
    zoom.style.left = e.pageX +10+ "px"
    zoom.style.display = "block";
});

main.addEventListener("mouseout", function(){
    zoom.style.display = "none";
});