大神，在哪里？帮帮我，看哪出了问题？十分感谢-慕课网

大神，在哪里？帮帮我，看哪出了问题？十分感谢

来源：9-3 扩展Canvas的context

仰望星空望

2015-06-05 18:03

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>扩充context方法,添加自己的绘图，目的是使用context.自己的方法来调用【设计自己的API】</title>

</head>

<body>

<canvas id="canvas" style="margin:auto;top:0;left:0;right:0;bottom:0;position:absolute;border:1px solid #ccc;">当前浏览器不支持，请更换浏览器</canvas>

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

//构造自己的moveTo

var orginalMoveTo=CanvasRenderingContext2D.prototype.moveTo;

CanvasRenderingContext2D.prototype.lastMoveToLoc={};

CanvasRenderingContext2D.prototype.moveTo=function(x,y)

{

orginalMoveTo.apply(context,[x,y]);

this.lastMoveToLoc.x=x;

this.lastMoveToloc.y=y;

}

//构造自己的context.fillStar()

//通过context原型CanvasRenderingContext2D。

//使用CanvasRenderingContext2D.prototype.fillStar这样的方式给context.fillStar进行赋值

CanvasRenderingContext2D.prototype.fillStar=function(r,R,rot)

{

//由于在函数里面也就是在context里面，则用this

this.beginPath();

for(var i=0;i<5;i++)

{

this.lineTo(Math.cos( (18+i*72-rot)/180*Math.PI)*R+this.lastMoveToLoc.x,

-Math.sin((18+i*72-rot)/180*Math.PI)*R+this.lastMoveToLoc.y);

this.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+this.lastMoveToLoc.x,

-Math.sin((54+i*72-rot)/180*Math.PI)*r+this.lastMoveToLoc.y);

}

this.closePath();

this.fill();

}

window.onload=function()

{

canvas.width=800;

canvas.height=800;

context.fillStyle="#058";

//直接调用扩充后的方法

context.moveTO(400,400);

//context.fillStar(150,300,400,400,0);,不传入x,y的值

context.fillStar(150,300,0);

}

</script>

</body>

</html>

写回答关注

3回答

yuyan

2017-03-10 14:56:32

下面的改为大写

0 0
百科船熟

2015-09-18 15:07:24

this.lastMoveToLoc.x=x;
this.lastMoveToloc.y=y;
---------------------->
this.lastMoveToloc = {
x:x,
y:y
}或者
---------------------->
在上面加上
this.lastMoveToloc = {}

0 0
两点多

2015-08-21 11:48:58

最后的moveTo大小写你的moveTO

0 0