微客导航 » 文章资讯 » 将HTML5画布缩放到鼠标光标

将HTML5画布缩放到鼠标光标

2024-05-13 19:04:40 387

画布始终从其当前原点开始缩放。默认原点为[0,0]。如果要从另一个角度进行缩放，则可以先执行ctx.translate(desiredX,desiredY);。这会将画布的原点重置为[desiredX，desiredY]。

该translate()方法重新映射画布上的(0,0)位置。该scale()方法将当前图形放大或缩小。如果要translate()通过偏移量到达画布上下文，则需要先将scale()其放大或缩小，然后再translate()返回与鼠标偏移量相反的位置。

下面的示例中给出了这些步骤

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);