跟随光标移动的放大镜，用于画布。

Question

跟随光标移动的放大镜，用于画布。

6

我正在为客户设计一款T恤设计师，并使用HTML5画布创建它。现在T恤设计师已经完成，但他要求我添加一个放大镜（类似于这个网站：http://mlens.musings.it/）。我发现了许多类似的脚本，但它们似乎都有一个共同点，它们使用一个小图像和一个大图像。然而，使用画布，我的情况不同，并且一直被困扰于如何在画布上添加放大镜来放大光标所在位置。

是否存在可以完成此任务的脚本？或者我还有哪些其他选项？

- user577732

1

这可能会有用：https://dev59.com/q3PYa4cB1Zd3GeqPiWnc#17156408 - user1693593

对于未来的任何人来说，这也是一个很好的选择，除了自己创建之外，http://css-tricks.com/examples/AnythingZoomer/index.php - user577732

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- powerc9000 · Accepted Answer

让我们将画布绘制到另一个缩放的画布上。

示例代码

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";
});