0， Math.PI * 2， 0.2);}draw();} * 参考资料 * HTML5-MagnifyingGlass ， 0.2);}if (e.key == d) {centerPoint.x = intAdd(centerPoint.x， originalRadius。

0。

i);scaleGlassLines[i] = line;}} 绘制线段 function drawLines() {var line;context.lineWidth = 1;for (var i = 0; i chartLines.length; i++) {line = chartLines[i];context.beginPath();context.strokeStyle = line.color;context.moveTo(line.xStart， yDis;var point = windowToCanvas(e.clientX，0)， y1，如下图所示： 在放大镜坐标系统中，担保两块区域的中心点一致，因为 canvas 在绘图片的时候。

originalRadius - 5，比方 style，0，这里我们利用 save 和 restore 要领排除裁剪区域的影响， 0);}计较图片被放大的区域的范畴 这里我们利用鼠标的位置作为被放大区域的中心点(放大镜跟着鼠标移动而移动)，放大镜利用较为准确的图例，假如两个元素的坐标离得较量近， 400，如下图所示 绘制原始线段 首先建设一个线段工具 function Line(xStart， parseInt(centerPoint.y));context.lineTo(parseInt(centerPoint.x + radius)， 0， black);context.strokeStyle = gradient;context.lineWidth = 5;context.arc(parseInt(centerPoint.x)， centerPoint.y，将 canvas 自身作为一副图片， e.clientY);xDis = point.x - lastPoint.x;yDis = point.y - lastPoint.y;centerPoint.x += xDis;centerPoint.y += yDis;lastPoint.x = point.x;lastPoint.y = point.y;draw();}}canvas.onmouseup = function (e) {moveGlass = false;}鼠标双击 当移动到对应的线段上时，检测是否在放大镜区域， Math.PI * 2，y， false);context.clip();context.beginPath();context.fillStyle = #fff;context.arc(centerPoint.x。

y2， e.clientY);var x1， scaleGlassRectangle.height);绘制放大边沿 createRadialGradient 用来绘制渐变图像 context.beginPath();var gradient = context.createRadialGradient(centerPoint.x，一个线的坐标是(200.5， Math.PI * 2，scaleGlassRectangle.x。

右和下别离相对欣赏器视窗的位置， centerPoint.y，originalRectangle.width，save 生存当前画布的一次状态， color) {// 起点x坐标this.xStart = xStart;// 起点y坐标this.yStart = yStart;// 终点x坐标this.xEnd = xEnd;// 终点y坐标this.yEnd = yEnd;// 用来标志是哪条线段this.index = index;// 线段颜色this.color = color;} 初始化线段 // 原始线段var chartLines = new Array();// 处于放大镜中的原始线段var glassLines;// 放大后的线段var scaleGlassLines;// 位于放大镜中的线段数量var glassLineSize;function initLines() {var line;line = new Line(200.5。

centerPoint.y。

放大镜中利用坐标系的图例要比原始坐标系越发准确，配置放大镜可以移动， yEnd;var clickPoint = {};clickPoint.x = scaleGlassRectangle.x + scaleGlassRectangle.width / 2;clickPoint.y = scaleGlassRectangle.y + scaleGlassRectangle.height / 2;var index = -1;for (var i = 0; i scaleGlassLines.length; i++) {var scaleLine = scaleGlassLines[i];xStart = scaleGlassRectangle.x + scaleLine.xStart - 3;xEnd = scaleGlassRectangle.x + scaleLine.xStart + 3;yStart = scaleGlassRectangle.y + scaleLine.yStart;yEnd = scaleGlassRectangle.y + scaleLine.yEnd;if (clickPoint.x xStart clickPoint.x xEnd clickPoint.y yStart clickPoint.y yEnd) {scaleLine.color = #f00;index = scaleLine.index;break;}}for (var i = 0; i chartLines.length; i++) {var line = chartLines[i];if (line.index == index) {line.color = #f00;} else {line.color = #888;}}draw();}键盘事件 因为线段离得较量近， index，然后会将这个状态压入一个仓库， scaleGlassRectangle.y + scaleGlassLines[i].yStart);context.lineTo(scaleGlassRectangle.x + scaleGlassLines[i].xEnd，即将原始区域左上角的点看做为(0， 0， centerPoint.y，swidth， centerPoint.y，所以这里我们计较区域的范畴 function calOriginalRectangle(point) {originalRectangle.x = point.x - originalRadius;originalRectangle.y = point.y - originalRadius;originalRectangle.width = originalRadius * 2;originalRectangle.height = originalRadius * 2;}绘制放大镜区域裁剪区域 放大镜一般是圆形的，我们需要将其装换为 canvas 的坐标。

400) - (200.5。

rgba(0，height: originalRectangle.height * scale}绘制图片 在这里我们利用 context.drawImage(img。

i);glassLines[i] = line;}scaleGlassLines = new Array(glassLineSize);for (var i = 0; i glassLineSize; i++) {line = new Line(0， yStart， parseInt(centerPoint.y + radius));//context.fill();context.stroke();}绘制放大镜function drawMagnifyingGlass() {calScaleLines();context.save();context.beginPath();context.arc(centerPoint.x， scaleGlassRectangle = {x: centerPoint.x - originalRectangle.width * scale / 2。

0， #888);chartLines.push(line);line = new Line(201.5。

originalRadius - 5， parseInt(centerPoint.y)，原始的区域会变大，这里我们利用 clip 函数裁剪出一个圆形区域，不按鼠标左键可能不在放大镜区域都不行以拖动放大镜，width: originalRectangle.width * scale。

2) + Math.pow(y2 - y1， 200.5，getBoundingClientRect 用于得到页面中某个元素的左， originalRadius);gradient.addColorStop(0。

需要知道左上角的坐标以及区域的宽高， line.yStart);context.lineTo(line.xEnd， originalRadius， 0， Math.PI * 2， xEnd， 200)， silver);gradient.addColorStop(1，假如在，从仓库里弹出最顶层的状态，0.9));context.strokeStyle = gradient;context.lineWidth = 5;context.arc(centerPoint.x， 10。

201.5。

然后将这块区域放大。

context.save();context.beginPath();context.arc(centerPoint.x， xEnd。

400) - (201.5。

scaleGlassRectangle.y + scaleGlassLines[i].yEnd);context.stroke();}context.restore();context.beginPath();var gradient = context.createRadialGradient(parseInt(centerPoint.x)， false);context.stroke();添加鼠标事件 为 canvas 添加鼠标移动事件 canvas.onmousemove = function (e) {......}转换坐标 鼠标事件得到坐标一般为屏幕的可能 window 的坐标。

false);context.clip();......context.restore();计较放大镜区域 通过中心点、被放大区域的宽高以及放大倍数， originalRadius， originalRectangle.y，这里利用键盘的w，配置放大镜不行以被移动，150， 关于图片预加载可以看这里 var canvas = document.getElementById(canvas);var context = canvas.getContext(2d);var img = document.getElementById(img); 配置相关变量 // 图片被放大区域的中心点， a，所以利用鼠标移动很难准确的选中线段。

sy，图片放大镜结果 在线演示 源码 道理 首先选择图片的一块区域， 2);if (dis Math.pow(originalRadius，然后取被放大区域的图像， parseInt(centerPoint.y)，height); 要领，lineWidth 等，鼠标双击可以选择该线段，然后再绘制到原先的图片上， 0。

s。

400。

0，那么这两条线险些就会重叠在一起，可以拖动放大镜，150。

这里利用 img 标签预加载图片， function windowToCanvas(x，一旦减少了某个区域， y) {var bbox = canvas.getBoundingClientRect();return {x: x - bbox.left，width，sx， dis;x1 = point.x;y1 = point.y;x2 = centerPoint.x;y2 = centerPoint.y;dis = Math.pow(x2 - x1。

然后按下鼠标左键， 200， canvas.onmousedown = function (e) {var point = windowToCanvas(e.clientX， 0。

减去原始区域起始的x值和y值， parseInt(centerPoint.y - radius));context.lineTo(parseInt(centerPoint.x)， d 来举办准确移动 document.onkeyup = function (e) {if (e.key == w) {centerPoint.y = intAdd(centerPoint.y。

#888);chartLines.push(line);glassLineSize = chartLines.length;glassLines = new Array(glassLineSize);for (var i = 0; i glassLineSize; i++) {line = new Line(0。

因此我们需要从头计较线段在放大镜坐标系中的位置， -0.2);}if (e.key == a) {centerPoint.x = intAdd(centerPoint.x， originalRadius，得到区域的左上角坐标以及区域的宽高， originalRadius);gradient.addColorStop(0.50， originalRectangle.height。

silver);gradient.addColorStop(0.90， -0.2);}if (e.key == s) {centerPoint.y = intAdd(centerPoint.y。

我们要实现3种事件 mousedown， silver);gradient.addColorStop(0.90， centerPoint.y， y: y - bbox.top}}修改鼠标样式 我们可以通过 css 来修改鼠标样式 #canvas {display: block;border: 1px solid red;margin: 0 auto;cursor: crosshair;}图表放大镜 我们大概基于 canvas 绘制一些图表可能图像，y: centerPoint.y - originalRectangle.height * scale / 2，鼠标松开时， mousemove， silver);gradient.addColorStop(1.0。

originalRadius，originalRectangle.x。

我们将线段的原始坐标举办了转化， 0。

0， 0。

将其绘制到放大镜区域里，上， sgLine;var glassLineIndex = 0;for (var i = 0; i chartLines.length; i++) {line = chartLines[i];// 判定线段是否在放大镜中if (line.xStart xStart || line.xEnd xEnd) {continue;}if (line.yEnd yEnd || line.yStart yStart) {continue;}gLine = glassLines[glassLineIndex];sgLine = scaleGlassLines[glassLineIndex];if (line.yEnd yEnd) {gLine.yEnd = yEnd;}if (line.yStart yStart) {gLine.yStart = yStart;}gLine.xStart = line.xStart - xStart;gLine.yStart = line.yStart - yStart;gLine.xEnd = line.xEnd - xStart;gLine.yEnd = line.yEnd - yStart;sgLine.xStart = parseInt(gLine.xStart * scale);sgLine.yStart = parseInt(gLine.yStart * scale);sgLine.xEnd = parseInt(gLine.xEnd * scale);sgLine.yEnd = parseInt(gLine.yEnd * scale);sgLine.color = line.color;glassLineIndex++;}glassLineSize = glassLineIndex;}绘制放大镜中心点 绘制放大镜中心的对准器 function drawAnchor() {context.beginPath();context.lineWidth = 2;context.fillStyle = #fff;context.strokeStyle = #000;context.arc(parseInt(centerPoint.x)，好比原始坐标系利用 1:100。

parseInt(centerPoint.y)，restore 用来规复上一次 save 的状态，同时为了轻便，也是放大镜的中心点var centerPoint = {};// 图片被放大区域的半径var originalRadius = 100;// 图片被放大区域var originalRectangle = {};// 放大倍数var scale = 2;// 放大后区域var scaleGlassRectangle画配景图片function drawBackGround() {context.drawImage(img，centerPoint.x， 0，今后所有的画图城市被限制的这个区域里，包括 canvas 的上下文属性。

canvas.ondblclick = function (e) {var xStart，sheight， mouseup，比方我们画两条线， false);context.stroke();drawAnchor();}添加事件鼠标拖动 鼠标移动到放大镜上， yEnd，x， Math.PI * 2，parseInt(centerPoint.x)， false);var radius = 15;context.moveTo(parseInt(centerPoint.x - radius)，鼠标移动时更新放大镜中兴点的坐标。

0.2));gradient.addColorStop(0.80，将该线段的颜色变为赤色， 20)，0， rgba(150， 20，另一个线的坐标为 (201.5， 0， yStart。

那么放大镜坐标系利用 1:10， function calScaleLines() {var xStart = originalRectangle.x;var xEnd = originalRectangle.x + originalRectangle.width;var yStart = originalRectangle.y;var yEnd = originalRectangle.y + originalRectangle.height;var line， 2)) {lastPoint.x = point.x;lastPoint.y = point.y;moveGlass = true;}}canvas.onmousemove = function (e) {if (moveGlass) {var xDis， Math.PI * 2， false);context.fill();context.lineWidth = 4;for (var i = 0; i glassLineSize; i++) {context.beginPath();context.strokeStyle = scaleGlassLines[i].color;context.moveTo(scaleGlassRectangle.x + scaleGlassLines[i].xStart，然后在该区域中绘制放大后的图， x2， context.drawImage(canvas，就会给元素的选择带来一些影响， 为了实现上面的结果， 当鼠标按下时。

parseInt(centerPoint.y)， scaleGlassRectangle.y， gLine，scaleGlassRectangle.width， 如下图所示: 初始化canvas id=canvas width=500 height=500/canvasimg src=image.png id=img 得到 canvas 和 image 工具， parseInt(centerPoint.y));context.moveTo(parseInt(centerPoint.x)，如下图所示： 利用图表放大镜的结果 在线演示 源码 道理 雷同于舆图中的图例， line.yEnd);context.stroke();}}计较原始区域和放大镜区域function calGlassRectangle(point) {originalRectangle.x = point.x - originalRadius;originalRectangle.y = point.y - originalRadius;originalRectangle.width = originalRadius * 2;originalRectangle.height = originalRadius * 2;scaleGlassRectangle.width = originalRectangle.width * scale;scaleGlassRectangle.height = originalRectangle.height * scale;scaleGlassRectangle.x = originalRectangle.x + originalRectangle.width / 2 - scaleGlassRectangle.width / 2;scaleGlassRectangle.y = originalRectangle.y + originalRectangle.height / 2 - scaleGlassRectangle.height / 2;// 将值装换为整数scaleGlassRectangle.width = parseInt(scaleGlassRectangle.width);scaleGlassRectangle.height = parseInt(scaleGlassRectangle.height);scaleGlassRectangle.x = parseInt(scaleGlassRectangle.x);scaleGlassRectangle.y = parseInt(scaleGlassRectangle.y);}计较线段在新坐标系统的位置 由道理图我们知道， 1，。