2回答

• 

  KODFLYKING

  2016-02-02 11:24:29

  var canvsWidth = 800;
  var canvsHeight = 600;
  var canvas = document.getElementById("canvas");
  var cantext = canvas.getContext("2d");
  canvas.width = canvsWidth;
  canvas.height = canvsHeight;
  
  var image = new Image();
  var clippingRegion={x: 400 , y: 200 , r:200 }
  image.src = "image.jpg";
  image.onload=function(e){
      initCanvas();
  }
  function initCanvas(){
      draw(image, clippingRegion);
  }
  function setClippingRegion(){
  
      cantext.beginPath();
      cantext.arc(clippingRegion.x , clippingRegion.y , clippingRegion.r , 0 ,Math.PI*2 , false);
      cantext.clip();
  }
  
  function draw(image, clippingRegion){
      cantext.clearRect( 0, 0,canvas.width,canvas.height);
      cantext.save();
      setClippingRegion(clippingRegion);
      cantext.drawImage(image , 0, 0);
      cantext.restore();
  }
  function show(){
      var clippingRegion.r=1000;
      alert(clippingRegion.r);
      draw(image, clippingRegion);
  
  }

  为啥我设置了clip的半径为1000画面不起作用呀？
  

  1 0

  Lure丶

  r=1000是在画面重置的时候才会用到哦

  2016-02-02 11:44:00

  共 1 条回复 >

• 

  l1uyub0b0b0

  2016-01-30 13:42:49

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

  你上面这个定义里少了一个参数。第四第五个参数应该是圆弧的起始弧度位置。正确的应该为：

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

  
  

  0 1