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);

}

為啥我設(shè)置了clip的半徑為1000畫面不起作用呀？

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

你上面這個(gè)定義里少了一個(gè)參數(shù)。第四第五個(gè)參數(shù)應(yīng)該是圓弧的起始弧度位置。正確的應(yīng)該為：

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