贝塞尔曲线2

来源：互联网发布：java轻量级web框架编辑：程序博客网时间：2024/06/05 04:30

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

margin:0;

padding:0;

}

.wrap{

position:relative;

margin:50px;

}

#red{

width:20px;

height:20px;

background-color: deeppink;

border:1px solid lightgray;

border-radius:50%;

position:absolute;

top:0;

left:10px;

}

#blue{

width:20px;

height:20px;

background-color: deepskyblue;

border:1px solid lightgray;

border-radius:50%;

position:absolute;

top:470px;

left:460px;

}

#be{

font-size:30px;

position:absolute;

top:0;

left:550px;

}

.r{

color:#FF0088;

}

.b{

color:#00AABB;

}

</style>

</head>

<body>

<divclass="wrap">

<canvasid="canvas" width="1000" height="1000">浏览器不支持</canvas>

<div id="be">Cubic-bezier(

<spanclass="r">0</span>,

<spanclass="r">1</span>,

<spanclass="b">1</span>,

<spanclass="b">0</span>

)</div>

</div>

<scripttype="text/javascript">

varred = document.getElementById("red");

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

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

var redMove = document.querySelectorAll(".r");

var blueMove = document.querySelectorAll(".b");

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

functioncreate() {

// x,y框

ctx.beginPath();

ctx.lineWidth = "1";

ctx.strokeStyle= "black";

ctx.moveTo(20,0);

ctx.lineTo(20,480);

ctx.lineTo(480,480);

ctx.stroke();

ctx.closePath();

// 灰线

ctx.beginPath();

ctx.lineWidth = "2";

ctx.strokeStyle= "#ccc";

ctx.lineWidth = "10";

ctx.moveTo(20,480);

ctx.lineTo(480,20);

ctx.stroke();

ctx.closePath();

// 圆

ctx.beginPath();

ctx.strokeStyle= "#ccc";

ctx.lineWidth = "2";

ctx.fillStyle= "#fff";

ctx.arc(20,480, 10, 0, Math.PI* 2, true);

ctx.stroke();

ctx.fill();

ctx.beginPath();

ctx.arc(480,20, 10, 0, Math.PI* 2, true);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

create();

functiondrawLine(x,y,m,n){

ctx.beginPath();

ctx.strokeStyle= "black";

ctx.lineWidth = "2"

ctx.moveTo(x,y);

ctx.lineTo(m,n);

ctx.stroke();

}

// 红球控制

varrx = 0;

var ry = 0;

red.onmousedown= function(e){

vare = e || window.event;

vareX = e.clientX - red.offsetLeft;

vareY = e.clientY - red.offsetTop;

document.onmousemove= function(ev){

varev = ev || window.event;

varevX = ev.clientX - eX;

varevY = ev.clientY - eY;

rx= evX;

ry= evY;

redMove[0].innerHTML= (rx / 480).toFixed(2);

redMove[1].innerHTML= ((ry + 480)/ 480).toFixed(2);

red.style.left= evX - red.offsetWidth /2 + "px";

red.style.top= evY - red.offsetHeight /2 + "px";

ctx.clearRect(0,0,1000,1000);

create();

drawLine(20,480,evX,evY);

ctx.closePath();

if(bx !=0 ||by != 0) {

ctx.beginPath();

drawLine(480,20,bx,by);

ctx.closePath();

}

ctx.beginPath();

ctx.lineWidth= "6";

ctx.moveTo(20,480);

ctx.bezierCurveTo(rx,ry,bx,by,480,20);

ctx.stroke();

ctx.closePath();

}

document.onmouseup= function(){

document.onmousemove= null;

document.onmouseup= null;

}

// 蓝球控制

varbx = 0;

var by = 0;

blue.onmousedown= function(e){

vare = e || window.event;

vareX = e.clientX - blue.offsetLeft;

vareY = e.clientY - blue.offsetTop;

document.onmousemove= function(ev){

varev = ev || window.event;

varevX = ev.clientX - eX;

varevY = ev.clientY - eY;

bx= evX;

by= evY;

// 保留两位小数

blueMove[0].innerHTML= (bx / 480).toFixed(2);

blueMove[1].innerHTML= ((480 - by) / 480).toFixed(2);

blue.style.left= evX - blue.offsetWidth /2 + "px";

blue.style.top= evY - blue.offsetHeight /2+"px";

ctx.clearRect(0,0,1000,1000);

create();

ctx.beginPath();

drawLine(480,20,evX,evY);

ctx.closePath();

if(rx !=0 ||ry!= 0) {

ctx.beginPath();

drawLine(20,480,rx,ry);

ctx.closePath();

}

ctx.beginPath();

ctx.lineWidth= "8";

ctx.moveTo(20,480);

ctx.bezierCurveTo(rx,ry,bx,by,480,20);

ctx.stroke();

ctx.closePath();

}

document.onmouseup= function(){

document.onmousemove= null;

document.onmouseup= null;

}

</script>

</body>

</html>

0 0