canvas整体放大_【HTML5】Canvas 实现放大镜效果

图片放大镜

效果

原理

首先选择图片的一块区域，然后将这块区域放大，然后再绘制到原先的图片上，保证两块区域的中心点一致, 如下图所示:

初始化

获得 canvas 和 image 对象，这里使用 标签预加载图片, 关于图片预加载可以看这里

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var img = document.getElementById("img");

设置相关变量

// 图片被放大区域的中心点，也是放大镜的中心点

var centerPoint = {};

// 图片被放大区域的半径

var originalRadius = 100;

// 图片被放大区域

var originalRectangle = {};

// 放大倍数

var scale = 2;

// 放大后区域

var scaleGlassRectangle

画背景图片

function drawBackGround() {

context.drawImage(img, 0, 0);

}

计算图片被放大的区域的范围

这里我们使用鼠标的位置作为被放大区域的中心点(放大镜随着鼠标移动而移动)，因为 canvas 在画图片的时候，需要知道左上角的坐标以及区域的宽高，所以这里我们计算区域的范围

function calOriginalRectangle(point) {

originalRectangle.x = point.x - originalRadius;

originalRectangle.y = point.y - originalRadius;

originalRectangle.width = originalRadius * 2;

originalRectangle.height = originalRadius * 2;

}

绘制放大镜区域

裁剪区域

放大镜一般是圆形的，这里我们使用 clip 函数裁剪出一个圆形区域，然后在该区域中绘制放大后的图。一旦裁减了某个区域，以后所有的绘图都会被限制的这个区域里，这里我们使用 save 和 restore 方法清除裁剪区域的影响。save 保存当前画布的一次状态，包含 canvas 的上下文属性，例如 style，lineWidth 等，然后会将这个状态压入一个堆栈。restore 用来恢复上一次 save 的状态，从堆栈里弹出最顶层的状态。

context.save();

context.beginPath();

context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);

context.clip();

......

context.restore();

计算放大镜区域

通过中心点、被放大区域的宽高以及放大倍数，获得区域的左上角坐标以及区域的宽高。

scaleGlassRectangle = {

x: centerPoint.x - originalRectangle.width * scale / 2,

y: centerPoint.y - originalRectangle.height * scale / 2,

width: originalRectangle.width * scale,

height: originalRectangle.height * scale

}

绘制图片

在这里我们使用 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 方法，将 canvas 自身作为一副图片，然后取被放大区域的图像，将其绘制到放大镜区域里。

context.drawImage(canvas,

originalRectangle.x, originalRectangle.y,

originalRectangle.width, originalRectangle.height,

scaleGlassRectangle.x, scaleGlassRectangle.y,

scaleGlassRectangle.width, scaleGlassRectangle.height

);

绘制放大边缘

createRadialGradient 用来绘制渐变图像

context.beginPath();

var gradient = context.createRadialGradient(

centerPoint.x, centerPoint.y, originalRadius - 5,

centerPoint.x, centerPoint.y, originalRadius);

gradient.addColorStop(0,