如何使用canvas实现图片的放大缩小？

Question

http://img1.yueyaa.com/show.p...
实现这样的效果

Answer 1

使用ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)可以实现图片的放大缩小功能，它接收9个参数，分别为

• image object

• 原图x坐标

• 原图y坐标

• 原图宽度

• 原图高度

• 画布x坐标

• 画布y坐标

• 绘制图片的宽度

• 绘制图片的高度

dWidth > sWidth && dHeight > sHeight 绘制的是放大的图片

dWidth < sWidth && dHeight < sHeight 绘制的是缩小的图片

• 图片缩放 demo

Answer 2

    window.addEventListener("resize", function () {
        setTimeout(function () {
            eReRankChart.resize();
        }, 500)
    });

以上是监控 页面大小的
题主要求的应该是 监控滚轮 监控滚轮向上向下事件 然后 将canvas重绘 相应改变它的 大小

上面的代码  不是canvas  是  js  仅供参考

Answer 3

它这个应该是监视滚轮然后用 transform:scale(x, y) 做的

Answer 4

同楼上，api就有

Answer 5

这是放大镜效果吧