贝塞尔曲线控制小案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 点类
function Point(x, y) {
this.x = x;
this.y = y;
}
// 渲染方法
Point.prototype.render = function () {
ctx.save();
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.strokeStyle = 'black';
ctx.lineWidth = '4';
ctx.arc(this.x,this.y,5,0,7,false);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}
// 每一个小圆圈都有接受点击的事件
Point.prototype.reciveMouseDown = function (x,y) {
if (x > this.x - 5 && x < this.x +5 && y >this.y - 5 && y < this.y + 5){
return true;
}
return false;
}
// 实例化四个点
var startPoint = new Point(100,200);
var endPoint = new Point(500,200);
var ctrPoint1 = new Point(130,300);
var ctrPoint2 = new Point(360,60);
draw();
function draw() {
// 清屏
ctx.clearRect(0,0,600,400);
// 画线
// 链接起始点和结束点
ctx.moveTo(startPoint.x,startPoint.y);
ctx.bezierCurveTo(ctrPoint1.x,ctrPoint1.y,ctrPoint2.x,ctrPoint2.y,endPoint.x,endPoint.y);
ctx.stroke();
// 渲染四个点
startPoint.render();
endPoint.render();
ctrPoint1.render();
ctrPoint2.render();
// 开始点结束点与控制点连线
ctx.save();
ctx.beginPath();
ctx.moveTo(startPoint.x,startPoint.y);
ctx.lineTo(ctrPoint1.x,ctrPoint1.y);
ctx.strokeStyle = 'cyan';
ctx.lineWidth = '2';
ctx.stroke();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.moveTo(endPoint.x,endPoint.y);
ctx.lineTo(ctrPoint2.x,ctrPoint2.y);
ctx.strokeStyle = 'cyan';
ctx.lineWidth = '2';
ctx.stroke();
ctx.restore();
ctx.save();
ctx.fillStyle = 'red';
ctx.font = '18px 微软雅黑';
ctx.fillText('s',startPoint.x,startPoint.y-15);
ctx.fillText('e',endPoint.x,endPoint.y-15);
ctx.fillText('c1',ctrPoint1.x,ctrPoint1.y-15);
ctx.fillText('c2',ctrPoint2.x,ctrPoint2.y-15);
}
var points = [startPoint,endPoint,ctrPoint1,ctrPoint2];
var _point = null;
// 监听canvas,判断点击的是那一个点
canvas.onmousedown = function (e) {
var x = e.offsetX;
var y = e.offsetY;
// 循环points数组,判断x,y这个点是在谁身上
for(var i=0;i<points.length;i++){
if (points[i].reciveMouseDown(x,y)){
_point = points[i];
}
}
// 判断点的是不是在某个点上,
if (!_point){
return;
}
// 拖拽
canvas.onmousemove = function (ev) {
_point.x = ev.offsetX;
_point.y = ev.offsetY;
draw();
}
}
document.onmouseup = function (ev) {
canvas.onmousemove = null;
_point = null;
}
</script>
</body>
</html>