canvas實現的圖片放大鏡效果

admin發表於2017-02-13
Canvas
分享一段程式碼例項，它利用canvas實現了放大鏡效果。

當滑鼠在圖片上按住左鍵以後，就可以展現放大效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#canvas {
  display:block;
  margin:0 auto;
  border:1px solid #aaa;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="offCanvas" style="display:none;"></canvas>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var offCanvas = document.getElementById("offCanvas")
var offContext = offCanvas.getContext("2d")
var down = false
var image = new Image()
var scale
window.onload = function() {
  canvas.width = 383;
  canvas.height = 239;
  image.src = "demo/js/img/pretty.jpg";
  image.onload = function() {
    offCanvas.width = image.width;
    offCanvas.height = image.height;
    scale = offCanvas.width / canvas.width;
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    offContext.drawImage(image, 0, 0)
  }
}
 
function weizhi(x, y) {
  var bbox = canvas.getBoundingClientRect()
  return {
    x: x - bbox.left,
    y: y - bbox.top
  };
}
canvas.onmousedown = function(e) {
  e.preventDefault();
  var point = weizhi(e.clientX, e.clientY);
  down = true;
  drawcanvasfaj(true, point);
}
canvas.onmousemove = function(e) {
  e.preventDefault();
  if (down) {
    var point = weizhi(e.clientX, e.clientY)
    drawcanvasfaj(true, point);
  }
}
canvas.onmouseup = function(e) {
  e.preventDefault();
  down = false;
  drawcanvasfaj(false);
}
canvas.onmouseout = function(e) {
  e.preventDefault();
  down = false;
  drawcanvasfaj(false);
}
 
function drawcanvasfaj(boolean, point) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  if (boolean == true) {
    drawfaj(point)
  }
}
 
function drawfaj(point) {
  var imageLG_cx = point.x * scale
  var imageLG_cy = point.y * scale
  var mr = 100
  var sx = imageLG_cx - mr
  var sy = imageLG_cy - mr
  var dx = point.x - mr
  var dy = point.y - mr
  context.save();
  context.lineWidth = 2;
  context.strokeStyle = "#FFCCCC"
  context.beginPath();
  context.arc(point.x, point.y, mr, 0, Math.PI * 2)
  context.stroke();
  context.clip();
  context.drawImage(offCanvas, sx, sy, 2 * mr, 2 * mr, dx, dy, 2 * mr, 2 * mr)
  context.restore();
}
</script>
</body>
</html>

相關文章