求老师解答

源自：3-3 建立交互逻辑

求老师解答

var clippingRegion={x:200,y:200,r:50}
context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,Math.PI*2,false);

这样定义之后会出现 Cannot read property 'x' of undefined。

如果将context.arc()里面的参数直接写数字又没问题为什么呢

提问者：Lure丶 2016-01-30 10:54

个回答

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画面不起作用呀？

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