HTML5 canvas magnifying glass (放大鏡) sample code Part1

2013-08-31

1441
0
ASP.NET
2013-09-11

摘要:HTML5 canvas magnifying glass (放大鏡) sample code Part1

原本看到 Feature #2: The Clipping Region 的文章(如下)，以為已經到正解

但是他少加了

clearRect與最重要的

context.save();//儲存狀態

context.restore();//回復狀態

所以他的程式只可以跑一次

Complete Magnifying Glass Source Code: https://skydrive.live.com/embed?cid=FBEB6373D9321A7F&resid=FBEB6373D9321A7F%2124088&authkey=AKfEacPDiHfmMXo

這三點我是看 HTML5 Canvas Clipping Region Tutorial 獲得的靈感。

function drawScreen() {

context.save();

context.clearRect(0, 0, theCanvas.width, theCanvas.height);

context.drawImage(oneImage, 0, 0, theCanvas.width, theCanvas.height);

   context.beginPath();
   context.arc(magnifyingGlassX, magnifyingGlassY,
      magnifyingGlassRadius, 0, Math.PI * 2, false);

context.clip();

   context.drawImage(theCanvas,
      magnifyRectangle.x, magnifyRectangle.y,
      magnifyRectangle.width, magnifyRectangle.height,

magnifyRectangle.x + magnifyRectangle.width / 2 -
scaledMagnifyRectangle.width / 2,

magnifyRectangle.y + magnifyRectangle.height / 2 -
scaledMagnifyRectangle.height / 2,

scaledMagnifyRectangle.width,
scaledMagnifyRectangle.height);

context.restore();

其他的Javascript

  var theCanvas;
  var context;
  var oneImage;

  var magnifyingGlassRadius = 200;
  var magnifyingGlassX = 400;
  var magnifyingGlassY = 300;
  var magnifyRectangle = { x: 200, y: 100, width: 400, height: 400 };
  var scaledMagnifyRectangle = { width: 800, height: 800 };

  window.onload = function () {
   theCanvas = document.getElementById("canvasDicom0");
   context = theCanvas.getContext("2d");

theCanvas.addEventListener('mousemove', mousemove, false);

   oneImage = new Image();
   oneImage.src = "Images/Tulips.jpg";
   oneImage.onload = function () {
    drawScreen();
   }

  }

  function mousemove(event) {
   var x = event.offsetX;
   var y = event.offsetY;

   magnifyingGlassX=x;
   magnifyingGlassY=y;

   magnifyRectangle.x = magnifyingGlassX - magnifyingGlassRadius;
   magnifyRectangle.y = magnifyingGlassY - magnifyingGlassRadius;

   if (magnifyRectangle.x < 0) {
    magnifyRectangle.x = 0;
   }

   if (magnifyRectangle.y < 0) {
    magnifyRectangle.y = 0;
   }

   magnifyRectangle.width = 2 * magnifyingGlassRadius;
   magnifyRectangle.height = 2 * magnifyingGlassRadius;

   //Debug.writeln("magnifyingGlassX=" + magnifyingGlassX);
   //Debug.writeln("magnifyingGlassY=" + magnifyingGlassY);

   drawScreen();
  }

UI 用Canvas

回首頁