image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
canvas{
position:absolute;
background: #fff;
}
div{
width:500px;
height:500px;
position: relative;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
const pos1 = [];
const pos2 = [];
init();//初始化画布
function init(){//初始化画布
ctx.font = "24px serif";
ctx.fillText('拉动两个控制点，改变曲线的形状',50,50);
/* 曲线的两个端点 */
ctx.beginPath();
ctx.arc(300,300,10,0,Math.PI*2);
ctx.fill();
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2);
ctx.fill();
/* 控制点一 */
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
ctx.beginPath();
let pos1x = 200;
let pos1y = 100;
ctx.arc(pos1x,pos1y,10,0,Math.PI*2);
ctx.fill();
pos1.push({pos1x,pos1y});
/* 控制点二 */
ctx.beginPath();
let pos2x = 200;
let pos2y = 300;
ctx.arc(200,300,10,0,Math.PI*2);
pos2.push({pos2x,pos2y});
ctx.fill();
ctx.beginPath();
ctx.moveTo(300,300);
ctx.lineTo(200,300);
ctx.stroke();
/* 曲线 */
ctx.beginPath();
ctx.moveTo(100,100);
ctx.bezierCurveTo(pos1[0].pos1x,pos1[0].pos1y,pos2[0].pos2x,pos2[0].pos2y,300,300);
ctx.stroke();
ctx.font='24px serif';
ctx.fillText('('+pos1[0].pos1x+','+pos1[0].pos1y+'),('+pos2[0].pos2x+','+pos2[0].pos2y+')',100,450);
}
/* 移动控制点 */
let div = document.querySelector('div');
div.onmousedown = function(ev){
/* console.log(ev.pageX,ev.pageY);
console.log(pos1[0].pos1x-5,pos1[0].pos1x+5);
console.log(pos1[0].pos1y-5,pos1[0].pos1y+5); */
if((ev.pageX>= pos1[0].pos1x-5 && ev.pageX<= pos1[0].pos1x+5) && (ev.pageY >= pos1[0].pos1y-5 && ev.pageY <= pos1[0].pos1y+5)){
document.onmousemove = function(ev){
pos1[0] = {pos1x:ev.pageX,pos1y:ev.pageY};
review();
}
document.onmouseup = function(ev){
document.onmousemove = null;
document.onmouseup = null;
}
}
if((ev.pageX>= pos2[0].pos2x-5 && ev.pageX<= pos2[0].pos2x+5) && (ev.pageY >= pos2[0].pos2y-5 && ev.pageY <= pos2[0].pos2y+5)){
document.onmousemove = function(ev){
pos2[0] = {pos2x:ev.pageX,pos2y:ev.pageY};
review();
}
document.onmouseup = function(ev){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
/* 移动后更新画布 */
function review(){
ctx.clearRect(0,0,500,500);
ctx.font='24px serif';
ctx.fillText('拉动两个红色的点，改变曲线的形状',50,50);
ctx.moveTo(100,100);
ctx.bezierCurveTo(pos1[0].pos1x, pos1[0].pos1y, pos2[0].pos2x, pos2[0].pos2y, 300,300);
ctx.stroke();
ctx.beginPath();
ctx.arc(300,300,10,0,Math.PI*2);
ctx.fill();
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2);
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(pos1[0].pos1x,pos1[0].pos1y);
ctx.stroke();
ctx.beginPath();
ctx.arc(pos1[0].pos1x,pos1[0].pos1y,10,0,Math.PI*2);
ctx.fill();
ctx.beginPath();
ctx.arc(pos2[0].pos2x,pos2[0].pos2y,10,0,Math.PI*2);
ctx.fill();
ctx.beginPath();
ctx.moveTo(300,300);
ctx.lineTo(pos2[0].pos2x,pos2[0].pos2y);
ctx.stroke();
ctx.font='24px serif';
ctx.fillText('('+pos1[0].pos1x+','+pos1[0].pos1y+'),('+pos2[0].pos2x+','+pos2[0].pos2y+')',100,450);
}
</script>
</body>
</html>
