Увеличительное стекло, которое следует за курсором для холста

Question

Я работаю над дизайнером футболок для моего клиента, и я сделал это, используя холст 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);
    console.log(zoom.style);
    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";
});