放大镜，跟随光标的画布

Magnifying glass that follows cursor for canvas

本文关键字：光标 跟随 放大镜      更新时间：2023-09-26

我正在为我的客户设计t恤，我使用html5画布制作了它。衬衫设计师现在已经完成了，但他要求我加一个放大镜(像这样:http://mlens.musings.it/)。我在那里发现了很多类似的脚本，然而，它们似乎都有一个共同点——它们使用小图像和大图像。然而，使用画布时，我有一个不同的场景，并且一直被如何添加放大镜来放大光标在画布上的任何位置所困扰。

是否存在可以完成此操作的脚本?或者我还有别的选择吗?

让我们将画布绘制到另一个画布上，但是要缩放。

<标题>小提琴示例

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";
});
相关文章：