<html>
<head>AS</head>
<script>
var cvs;
var context;
//context.fill();//填充
//context.stroke();//绘制边框
//context.fillStyle = "#FF0000";
//context.fillRect(20,20,200,200);
function DrawBezier(p0,p1,p2)
{
context.strokeStyle = "#000000";
context.beginPath();
for(var i = 0;i < 1;i += 0.001)
{
var x0 = (1 - i) * (1-i) * p0.x;
var y0 = (1 - i) * (1-i) * p0.y;
var x1 = (1 - i) * 2*i * p1.x;
var y1 = (1 - i) * 2*i* p1.y;
var x2 = i * i * p2.x;
var y2 = i * i * p2.y;
if(i == 0)
context.moveTo(x0+x1+x2,y0+y1+y2);
else
context.lineTo(x0+x1+x2,y0+y1+y2);
}
//context.closePath();
context.stroke();
}
// p1,p2为控制点
function DrawBezier3(p0,p1,p2,p3)
{
context.strokeStyle = "#000000";
context.beginPath();
for(var i = 0;i < 1;i += 0.001)
{
var a = 1 - i;
var x0 = a * a * a * p0.x;
var y0 = a * a * a * p0.y;
var x1 = 3 * i * i * a * p1.x;
var y1 = 3 * i * i * a * p1.y;
var x2 = 3 * i * a * a * p2.x;
var y2 = 3 * i * a * a * p2.y;
var x3 = i * i * i * p3.x;
var y3 = i * i * i * p3.y;
var x = x0 + x1 + x2 + x3;
var y = y0 + y1 + y2 + y3;
if(i == 0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
//context.closePath();
context.stroke();
}
function DrawPoint(x,y,rad)
{
context.fillStyle = "#FF0000";
context.beginPath();
//ctx.arc(开始原点x，开始原点y，半径，起始弧度，终止弧度，true表示逆时针动画)
context.arc(x, y, rad, rad, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
}
function DrawP(p)
{
DrawPoint(p.x,p.y,5);
}
var pA = {"x":20,"y":280};
var pB = {"x":120,"y":280};
var pC = {"x":220,"y":20};
var pD = {"x":120,"y":20};
window.onload = function()
{
cvs = document.getElementById("cvs");
context = cvs.getContext("2d");
context.lineWidth="1";
context.strokeStyle = "#00000";
DrawBezier(pA,pB,pC);
DrawBezier3(pA,pB,pD,pC);
DrawP(pA);
//DrawP(pB);
DrawP(pC);
//DrawP(pD);
};
var id = 0;
function onChange(v)
{
id = v;
}
function onClick(v)
{
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
console.log(x+","+y);
if(id == "0")
{
pA.x = parseInt(x);
pA.y = parseInt(y);
}else if(id == "1")
{
pB.x = parseInt(x);
pB.y = parseInt(y);
}else if(id == "2")
{
pC.x = parseInt(x);
pC.y = parseInt(y);
}else if(id == "3")
{
pD.x = parseInt(x);
pD.y = parseInt(y);
}
//cvs.height = height;
context.clearRect(0,0,cvs.width,cvs.height);
DrawBezier(pA,pB,pC);
DrawBezier3(pA,pB,pD,pC);
DrawP(pA);
DrawP(pB);
DrawP(pC);
DrawP(pD);
}
</script>
<body>
<div>
<input type="text" id="id" onchange="onChange(this.value)">
<input type="text" id="x" onchange="">
<input type="text" id="y" onchange="">
<button onclick="onClick()">click</button>
</div>
<canvas id="cvs" width="800px" height="800px"></canvas>
</body>
</html>
<script>
</script>