贝塞尔曲线1

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

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

padding:0;

margin:0;

}

#canvas{

position:absolute;

top:20px;

left:20px;

z-index:1;

}

#cp1{

width:20px;

height:20px;

border-radius:10px;

background-color: deeppink;

position:absolute;

left:10px;

top:160px;

z-index:5;

}

#cp2{

width:20px;

height:20px;

border-radius:10px;

background-color: deepskyblue;

position:absolute;

left:310px;

top:460px;

z-index:5;

}

#text{

position:absolute;

left:50px;

top:120px;

z-index:5;

}

</style>

</head>

<body>

<div id="text">cubic-bezier(0,1,1,0)</div>

<canvasid="canvas" width="300" height="600"></canvas>

<scripttype="text/javascript">

varcanvas = document.getElementById("canvas");

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

var cp1 = document.querySelector("#cp1");

var cp2 = document.querySelector("#cp2");

var textDiv = document.querySelector("#text");

functiondrawBack(){

vargradient = ctx.createLinearGradient(0,0,0,600);

gradient.addColorStop(0,"white");

gradient.addColorStop(0.5,"#F0F0F0");

gradient.addColorStop(1,"white");

ctx.beginPath();

ctx.fillStyle = gradient;

ctx.fillRect(0,0,300,600);

// 白条

ctx.fillStyle= "white";

for(var i = 150; i< 450; i += 40) {

ctx.beginPath();

ctx.fillRect(0,i,300,20);

}

// x轴

ctx.beginPath();

ctx.strokeStyle= "black";

ctx.lineWidth = 1;

ctx.moveTo(0,450);

ctx.lineTo(300,450);

ctx.stroke();

// y轴

ctx.beginPath();

ctx.strokeStyle= "black";

ctx.lineWidth = 1;

ctx.moveTo(0,450);

ctx.lineTo(0,150);

ctx.stroke();

}

functiondrawLine(){

ctx.clearRect(0,0,300,600);

drawBack();

ctx.beginPath();

ctx.strokeStyle= "#000000";

ctx.lineWidth = 5;

ctx.moveTo(0,450);

ctx.bezierCurveTo(cp1.offsetLeft- 10,cp1.offsetTop - 10,cp2.offsetLeft - 10,cp2.offsetTop- 10,300,150);

ctx.stroke();

// 红球连线

ctx.beginPath();

ctx.moveTo(cp1.offsetLeft- 10,cp1.offsetTop - 10);

ctx.lineTo(0,450);

ctx.lineWidth = 2;

ctx.stroke();

// 蓝球连线

ctx.beginPath();

ctx.moveTo(cp2.offsetLeft- 10,cp2.offsetTop - 10);

ctx.lineTo(300,150);

ctx.stroke();

drawText();

}

// 写字

functiondrawText(){

varp1X = ((cp1.offsetLeft - 10) / 300).toFixed(2);

varp1Y = ((450 -(cp1.offsetTop - 10)) / 300).toFixed(2);

varp2X = ((cp2.offsetLeft - 10) / 300).toFixed(2);

varp2Y = ((450 -(cp2.offsetTop - 10)) / 300).toFixed(2);

textDiv.innerHTML= "cubic-bezier("+p1X + ","+ p1Y + ","+ p2X + ","+ p2Y +")";

}

cp1.onmousedown= function(){

document.onmousemove= function(e){

varev = e || window.event;

ev.preventDefault();

varx = ev.clientX;

vary = ev.clientY;

if(x < 20) {

x= 20;

}

if(x > 320) {

x= 320;

}

cp1.style.left= (x - 10)+ "px";

cp1.style.top= (y - 10)+ "px";

drawLine();

}

document.onmouseup= function(){

document.onmousemove= null;

}

cp2.onmousedown= function(){

document.onmousemove= function(e){

varev = e || window.event;

ev.preventDefault();

varx = ev.clientX;

vary = ev.clientY;

if(x < 20) {

x= 20;

}

if(x > 320) {

x= 320;

}

cp2.style.left= (x - 10)+ "px";

cp2.style.top= (y - 10)+ "px";

drawLine();

}

document.onmouseup= function(){

document.onmousemove= null;

}

drawLine();

</script>

</body>

</html>

0 0