大神,在哪里?幫幫我,看哪出了問題?十分感謝
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<script>
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)
{
//由于在函數(shù)里面也就是在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>
2017-03-10
2015-09-18
this.lastMoveToLoc.x=x;
this.lastMoveToloc.y=y;
---------------------->
this.lastMoveToloc = {
? ? x:x,
? ? y:y
}或者
---------------------->
在上面加上
this.lastMoveToloc = {}
2015-08-21
最后的moveTo大小寫 你的moveTO