模仿手机图像查看软件用canvas实现一个图像查看器。
目前实现:
利用将图像起点绘制到canvas之外的技术实现了图像的缩放。
包括,图像自适应、图像放大缩小
下一步准备实现:
鼠标拖动图像
截图:
总结下要点与步骤:
要点:图像缩放与自适应要一起做的话,缩放对象实际是canvas,然后图像去对新的canvas做自适应。
步骤:
1.缩放canvas,得到缩放后的canvas的长宽。
2.图像对于缩放后的canvas做自适应,得到图像的长宽。
3.利用旧canvas的中心点与缩放后图像的长宽,计算图像绘制起点。
4.调用drawImage();方法,传入图像,绘制起点,缩放长宽。
本文由 CSDN MIKUScallion 原创,更多canvas案例代码:http://blog.csdn.net/mikuscallion
下面是源代码:
①页面代码
<!DOCTYPE html&g