剪辑区域-橡皮擦&不断变小的动画15

/*剪辑区域是在canvas之中由路径所定义的一块区域，IE会将所有绘图操作都限制在本区域内执行，在默认情况下，剪辑区域和canvas区域一样大，但创建路径并调用clip()后，就显式的创建了一个剪辑戴戴。调用clip()方法，会把剪辑区域设置为当前剪辑区域与当前路径的交集*/
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeStyle = "red";
context.fillStyle = "blue";
context.beginPath();
context.arc(100, 100,40/2,0, Math.PI*2, false);
context.stroke();
context.fill();
context.clip();
context.beginPath();
context.fillStyle = "black";
context.arc(100, 100,10/2,0, Math.PI*2, false);
context.stroke();
context.fill();
//...............上面是一个比较简单的大圆套小圆的例子，下面是橡皮擦功能...................

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    strokeStyleSelect = document.getElementById('strokeStyleSelect'),
    fillStyleSelect = document.getElementById('fillStyleSelect'),
    drawRadio = document.getElementById('drawRadio'),
    eraserRadio = document.getElementById('eraserRadio'),
    eraserShapeSelect = document.getElementById('eraserShapeSelect'),
    eraserWidthSelect = document.getElementById('eraserWidthSelect'),

    ERASER_LINE_WIDTH = 1,

    ERASER_SHADOW_COLOR = 'rgb(0,0,0)',
    ERASER_SHADOW_STYLE = 'blue',
    ERASER_STROKE_STYLE = 'rgb(0,0,255)',
    ERASER_SHADOW_OFFSET = -5,
    ERASER_SHADOW_BLUR = 20,

    GRID_HORIZONTAL_SPACING = 10,
    GRID_VERTICAL_SPACING = 10,
    GRID_LINE_COLOR = 'lightblue',
    drawingSurfaceImageData,
   
    lastX,
    lastY,
    mousedown = {},
    rubberbandRect = {},
    dragging = false,
    guidewires = true;

// General-purpose functions.....................................

function drawGrid(color, stepx, stepy) {
   context.save()

   context.strokeStyle = color;
   context.fillStyle = '#ffffff';
   context.lineWidth = 0.5;
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);

   for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
     context.beginPath();
     context.moveTo(i, 0);
     context.lineTo(i, context.canvas.height);
     context.stroke();
   }

   for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
     context.beginPath();
     context.moveTo(0, i);
     context.lineTo(context.canvas.width, i);
     context.stroke();
   }

   context.restore();
}

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

// Save and restore drawing surface..............................

function saveDrawingSurface() {
   drawingSurfaceImageData = context.getImageData(0, 0,
                             canvas.width,
                             canvas.height);
}

function restoreDrawingSurface() {
   context.putImageData(drawingSurfaceImageData, 0, 0);
}

// Rubberbands...................................................

function updateRubberbandRectangle(loc) {
   rubberbandRect.width  = Math.abs(loc.x - mousedown.x);
   rubberbandRect.height = Math.abs(loc.y - mousedown.y);

   if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
   else                     rubberbandRect.left = loc.x;

   if (loc.y > mousedown.y) rubberbandRect.top = mousedown.y;
   else                     rubberbandRect.top = loc.y;
}

function drawRubberbandShape(loc) {
   var angle = Math.atan(rubberbandRect.height/rubberbandRect.width),
       radius = rubberbandRect.height / Math.sin(angle);

   if (mousedown.y === loc.y) {
      radius = Math.abs(loc.x - mousedown.x);
   }

   context.beginPath();
   context.arc(mousedown.x, mousedown.y, radius, 0, Math.PI*2, false);
   context.stroke();
   context.fill();
}

function updateRubberband(loc) {
   updateRubberbandRectangle(loc);
   drawRubberbandShape(loc);
}

// Guidewires....................................................

function drawHorizontalLine (y) {
   context.beginPath();
   context.moveTo(0,y+0.5);
   context.lineTo(context.canvas.width,y+0.5);
   context.stroke();
}

function drawVerticalLine (x) {
   context.beginPath();
   context.moveTo(x+0.5,0);
   context.lineTo(x+0.5,context.canvas.height);
   context.stroke();
}

function drawGuidewires(x, y) {
   context.save();
   context.strokeStyle = 'rgba(0,0,230,0.4)';
   context.lineWidth = 0.5;
   drawVerticalLine(x);
   drawHorizontalLine(y);
   context.restore();
}

// Eraser........................................................

function setDrawPathForEraser(loc) {
   var eraserWidth = parseFloat(eraserWidthSelect.value);
   
   context.beginPath();

   if (eraserShapeSelect.value === 'circle') {
      context.arc(loc.x, loc.y,
                  eraserWidth/2,
                  0, Math.PI*2, false);
   }
   else {
      context.rect(loc.x - eraserWidth/2,
                   loc.y - eraserWidth/2,
                   eraserWidth, eraserWidth);
   }
   context.clip();
}

function setErasePathForEraser() {
   var eraserWidth = parseFloat(eraserWidthSelect.value);
   
   context.beginPath();

   if (eraserShapeSelect.value === 'circle') {
      context.arc(lastX, lastY,
                  eraserWidth/2 + ERASER_LINE_WIDTH,
                  0, Math.PI*2, false);
   }
   else {
      context.rect(lastX - eraserWidth/2 - ERASER_LINE_WIDTH,
                   lastY - eraserWidth/2 - ERASER_LINE_WIDTH,
                   eraserWidth + ERASER_LINE_WIDTH*2,
                   eraserWidth + ERASER_LINE_WIDTH*2);
   }
   context.clip();
}

function setEraserAttributes() {
  context.lineWidth     = ERASER_LINE_WIDTH;
  context.shadowColor   = ERASER_SHADOW_STYLE;
  context.shadowOffsetX = ERASER_SHADOW_OFFSET; 
  context.shadowOffsetY = ERASER_SHADOW_OFFSET;
  context.shadowBlur    = ERASER_SHADOW_BLUR;
  context.strokeStyle   = ERASER_STROKE_STYLE;
}

function eraseLast() {
   context.save();

   setErasePathForEraser();
   drawGrid(GRID_LINE_COLOR,
            GRID_HORIZONTAL_SPACING,
            GRID_VERTICAL_SPACING);

   context.restore();
}

function drawEraser(loc) {
   context.save();

   setEraserAttributes();     
   setDrawPathForEraser(loc);
   context.stroke();

   context.restore();
}

// Canvas event handlers.........................................

canvas.onmousedown = function (e) {
   var loc = windowToCanvas(e.clientX, e.clientY);
   
   e.preventDefault(); // prevent cursor change

   if (drawRadio.checked) {
      saveDrawingSurface();
   }

   mousedown.x = loc.x;
   mousedown.y = loc.y;

   lastX = loc.x;
   lastY = loc.y;
   
   dragging = true;
};

canvas.onmousemove = function (e) {
   var loc; 

   if (dragging) {
      e.preventDefault(); // prevent selections

      loc = windowToCanvas(e.clientX, e.clientY);

      if (drawRadio.checked) {
         restoreDrawingSurface();
         updateRubberband(loc);

         if(guidewires) {
            drawGuidewires(loc.x, loc.y);
         }
      }
      else {
         eraseLast();
         drawEraser(loc);
      }
      lastX = loc.x;
      lastY = loc.y;
   }
};

canvas.onmouseup = function (e) {
   loc = windowToCanvas(e.clientX, e.clientY);

   if (drawRadio.checked) {
      restoreDrawingSurface();
      updateRubberband(loc);
   }

   if (eraserRadio.checked) {
      eraseLast();
   }
   
   dragging = false;
};

// Controls event handlers.......................................

strokeStyleSelect.onchange = function (e) {
   context.strokeStyle = strokeStyleSelect.value;
};

fillStyleSelect.onchange = function (e) {
   context.fillStyle = fillStyleSelect.value;
};

// Initialization................................................

context.strokeStyle = strokeStyleSelect.value;
context.fillStyle = fillStyleSelect.value;
drawGrid(GRID_LINE_COLOR,
         GRID_HORIZONTAL_SPACING,
         GRID_VERTICAL_SPACING);
         
         
//...................下面的例子也比较笨，完全是通过重绘来实现的
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

// Functions..........................................................

function drawText() {
   context.save();
   context.shadowColor = 'rgba(100, 100, 150, 0.8)';
   context.shadowOffsetX = 5;
   context.shadowOffsetY = 5;
   context.shadowBlur = 10;

   context.fillStyle = 'cornflowerblue';
   context.fillText('HTML5', 20, 250); 
   context.strokeStyle = 'yellow';
   context.strokeText('HTML5', 20, 250);
   context.restore();
}

function setClippingRegion(radius) {
   context.beginPath();
   context.arc(canvas.width/2, canvas.height/2,
               radius, 0, Math.PI*2, false);
   context.clip();
}

function fillCanvas(color) {
   context.fillStyle = color;
   context.fillRect(0, 0, canvas.width, canvas.height);
}

function endAnimation(loop) {
   clearInterval(loop);

   setTimeout( function (e) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawText();
   }, 1000);
}

function drawAnimationFrame(radius) {
   setClippingRegion(radius);
   fillCanvas('lightgray');
   drawText();
}

function animate() {
   var radius = canvas.width/2,
       loop;

   loop = window.setInterval(function() {
      radius -= canvas.width/100;

      fillCanvas('charcoal');

      if (radius > 0) {
         context.save();
         drawAnimationFrame(radius);
         context.restore();
      }
      else {
         endAnimation(loop);
      }
   }, 16);
};

// Event handlers....................................................

canvas.onmousedown = function (e) {
   animate();
};

// Initialization.....................................................

context.lineWidth = 0.5;
context.font = '128pt Comic-sans';
drawText();


//................不断缩小的图片......................................

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    text='Spinning',
    angle = Math.PI/50,
    clockwise = true,
    fontHeight = 128,
    origin = { },
    paused = true,
    scale = 1.008;

// Functions......................................................

function drawText() {
   context.fillText(text, 0, 0);
   context.strokeText(text, 0, 0);
}

// Event handlers.................................................

canvas.onclick = function() {
   paused = !paused;
   if (!paused) {
      clockwise = !clockwise;
      scale = 1/scale;
   }
};

// Animation......................................................

setInterval(function() {
   if (!paused) {
      context.clearRect(-origin.x, -origin.y,
                        canvas.width, canvas.height);

      context.rotate(clockwise ? angle : -angle);
      context.scale(scale, scale);

      drawText();
   }
}, 1000/60);

// Initialization.................................................

context.font = fontHeight + 'px Palatino';

context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'yellow';

context.shadowColor = 'rgba(100, 100, 150, 0.8)';
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;

context.textAlign = 'center';
context.textBaseline = 'middle';

origin.x = canvas.width/2;
origin.y = canvas.height/2;

context.transform(1, 0, 0, 1, origin.x, origin.y);

drawText();