小伙伴们，听说过用Canvas画布做个放大镜吗？虽然乍一听好像挺复杂的，但是了解下原理以后，简直有趣得不要不要的！
理解放大镜的基本原理
首先，我们得搞清楚这个放大镜是怎么用的。其实就是把你想看的地方在图片上找出来，然后放大，最后再放回原处，让它们的中心对准就行了。这样的话，你只要轻轻移动鼠标，放大镜也会跟着走，你就能看到哪里点哪里就放大哪里！
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
搞定这事儿，咱首先得知道放大区左上角在哪儿，尺寸多少。这就需要用到一些简单的计算，比如用那个叫`getBoundingClientRect`的函数来找出元素在网页中的实际位置。这么一弄，就能确保放大镜放在正确的位置，调整到合适的大小了！
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;}
Canvas真心牛逼，啥都能画！要搞个放大镜特效？那就要用到`context.drawImage`咯。这个方法能让我们在Canvas上抠出一块儿图片，然后贴到想要的位置上去。
context.save(); context.beginPath(); context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false); context.clip(); ...... context.restore();
画放大镜吗？最直接的方法就是画一个大圆圆的效果，才炫酷！这时得用上’clip’函数，剪出来一个刚好合适的圆形图像。然后在这个小圈圈里面涂鸦你想放大大的图案，这样就跟真正的放大镜似的了！
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(canvas,
originalRectangle.x, originalRectangle.y,
originalRectangle.width, originalRectangle.height,
scaleGlassRectangle.x, scaleGlassRectangle.y,
scaleGlassRectangle.width, scaleGlassRectangle.height);
在Canvas上画图时，别忘了对准坐标点。如果线离得太近就会变得模糊，很难找到你要的那个。所以，画之前记得先弄清楚位置准时很重要滴！
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();
想让放大镜跟手走，我们要搞懂鼠标这几个操作——mousedown（开始单击）,mousemove（拖拽移动）和mouseup（松开）。鼠标一按下，先看看是不是在放大镜里头；如果是的，那就可以玩儿命地拖了。
canvas.onmousemove = function (e) {
......
}
精确选择和移动元素
有时候，有时鼠标很难点中那些挨在一起的元素。别急，试试看用键盘上的`w`、`a`、`s`、`d`这四个键来精确定位就行。这样一来，选东西、换位置什么的都轻松搞定！
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {x: x - bbox.left, y: y - bbox.top}}
实际应用和效果展示
#canvas {
display: block;
border: 1px solid red;
margin: 0 auto;
cursor: crosshair;}
大家知道生活中的放大镜有什么妙用吗？比如说看地图，有了它，再小的地方都看得清清楚楚；画图表也一样，用上放大镜，每个细节都能处理得恰到好处。这么一说，是不是觉得放大镜既实用又有趣？
总的来说，用Canvas做个放大镜效果，不仅能让图片变得更有趣，还能增加用户和界面的互动！这个简单的技巧实用又好玩儿，快去试试吧哈哈~
评论0