个回答

• 霞_霞

  2017-03-06 14:26:28

  已采纳

  var wid = 800,

  hei = 600,

  canvas = document.getElementById('canvas'),

  ctx = canvas.getContext('2d'),

  clippingRegion = {},

  radius = 70,

  theAnimation; //控制show动画

  
  

  canvas.width = wid;

  canvas.height = hei;

  
  

  var image = new Image();

  image.src = 'img/1.jpg';

  
  

  image.onload = function() {

  initCanvas();

  }

  
  

  function initCanvas() {

  clearInterval(theAnimation);

  clippingRegion = {

  x: (Math.random() * (wid - radius * 2) + 50),

  y: (Math.random() * (hei - radius * 2) + 50),

  r: 0

  };

  var ID = setInterval(function(){

  clippingRegion.r +=4;

  draw(image, clippingRegion);

  if(clippingRegion.r>=radius){

  clearInterval(ID);

  }

  },30)

  }

  
  

  function draw(image, clippingRegion) {

  ctx.clearRect(0, 0, wid, hei);

  ctx.save();

  setClippingRegion(clippingRegion);

  ctx.drawImage(image, 0, 0, wid, hei);

  ctx.restore();

  }

  
  

  function setClippingRegion(clippingRegion) {

  ctx.beginPath();

  ctx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, 2 * Math.PI, false);

  ctx.clip();

  }

  
  

  function reset() {

  initCanvas();

  }

  
  

  function show() {

  theAnimation = setInterval(function(){

  clippingRegion.r +=20;

  draw(image, clippingRegion);

  if(clippingRegion.r>=2*Math.max(wid,hei)){

  clearInterval(theAnimation);

  }

  },30)

  }

  
  

  0

• 小小小调

  2016-03-03 14:50:14

  初始半径设为0px不就行了

  0