HTML5 Canvas实现放大镜结果示例

在线源码预览

源码

道理

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

初始化

<canvas id="canvas" width="500" height="500"> </canvas> <img src=http://www.jb51.net/html5/"image.png" style="display: none" id="img">

得到 canvas 和 image 工具，这里行使 <img> 标签预加载图片, 关于图片预加载可以看这里

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, 'rgba(0,0,0,0.2)'); gradient.addColorStop(0.80, 'silver'); gradient.addColorStop(0.90, 'silver'); gradient.addColorStop(1.0, 'rgba(150,150,150,0.9)'); context.strokeStyle = gradient; context.lineWidth = 5; context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false); context.stroke();

添加鼠标变乱

为 canvas 添加鼠标移动变乱

canvas.onmousemove = function (e) { ...... }

转换坐标

鼠标变乱得到坐标一样平常为屏幕的可能 window 的坐标，我们必要将其装换为 canvas 的坐标。getBoundingClientRect 用于得到页面中某个元素的左，上，右和下别离相对赏识器视窗的位置。

function windowToCanvas(x, y) { var bbox = canvas.getBoundingClientRect(); return {x: x - bbox.left, y: y - bbox.top} }

修改鼠标样式

我们可以通过 css 来修改鼠标样式

#canvas { display: block; border: 1px solid red; margin: 0 auto; cursor: crosshair; }

图表放大镜

我们也许基于 canvas 绘制一些图表可能图像，假如两个元素的坐标离得较量近，就会给元素的选择带来一些影响，譬喻我们画两条线，一个线的坐标是(200.5, 400) -> (200.5, 200)，另一个线的坐标为 (201.5, 400) -> (201.5, 20)，那么这两条线险些就会重叠在一路，如下图所示：

行使图表放大镜的结果

在线演示    源码

道理

相同于舆图中的图例，放大镜行使较为准确的图例，如下图所示：

在放大镜坐标体系中，原始的地区会变大，如下图所示

绘制原始线段

起首建设一个线段工具

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!