使用canvas元素绘制图像放大镜.doc.docVIP

使用canvas元素绘制图像放大镜 使用HTML 5中的canvas元素以及Canvas API，不仅可以绘制图形，还可以绘制图像、处理图像处理，以及制作各种之前必须使用Flash才能绘制的图像动画。 本节介绍使用canvas元素绘制图像放大镜的一个案例。 3.4.1　案例概述 在网页中，经常会由于显示空间不够或出于性能考虑等在绘制图片时采取不按原尺寸绘制全图，而将该图尺寸缩小，或重新制作小尺寸的缩略图，然后只显示缩小后的缩略图。如果用户想看清楚该图，就必须单击该图，然后在浏览器中重新打开一个新的窗口或标签才能查看原图。 本案例将利用canvas元素为缩略图添加一个放大镜，当用户将鼠标移动到该缩略图上时，会自动出现一个放大镜，将鼠标所在区域（本例中为鼠标的右下角40像素×40像素的图像区域）进行放大显示（本例中为放大4倍，横向放大2倍，纵向放大2倍），并且随着鼠标的移动会自动更新放大镜中的放大区域，当用户将鼠标移动到图像之外时，该放大镜被自动隐藏。 3.4.2　页面显示效果 首先来看一下案例页面在浏览器中的显示效果，如图3-10所示。 当鼠标移动到图像上时，会自动在图像上出现一个放大镜，在放大镜中放大显示鼠标指针所在位置的局部区域的图像，并随着鼠标的移动自动更新放大区域，如图3-11所示。 当鼠标移出图像外时，该放大镜会被自动隐藏。 3.4.3　案例知识点 接下来看