先上效果图
不知道为什么喜欢用元芳2个字！如果都要世界都要元芳来看，感觉元芳要忙不过来！
cav1.gif
在上demo下载地址
https://github.com/976500133/CanvasCurve
分析
1.需要canvas 事件支持
canvas 支持
onmouseenter
onmousedown
onmousemove
onmouseup
onmouseout
事件等
2.最终这个效果是每次30/1000 s 清空画布重置的效果。
上代码，程序员就是这么干脆，说多了没意思
HTML 代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./common/script.js"> </script> </head> <body> <div class="container"> <canvas id="scene" width="1120" height="130" > </canvas> </div> </body></html>
JS 代码
// xxxxx.style.cursor?=?"url(005.jpg),auto";var canvas, ctx;var defaultCircles = [
{x : 112 , y : 65 } ,
{x : 336 , y : 65 } ,
{x : 560 , y : 65 } ,
{x : 784 , y : 65 } ,
{x : 1008 , y : 65 }
]; var circles = [];//所有的圆
var selectedCircle;//选中的圆
var hoveredCircle;//
var Timer = null; //圆对象function Circle(x, y, radius){ this.x = x; this.y = y; this.radius = radius;
}//清除canvasfunction clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}//画圆function drawCircle(ctx, x, y, radius , fillStyle = 'rgba(198, 199, 199, 1.00)') {
ctx.fillStyle = fillStyle
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}//传说中的吸附效果function renderCircle(circles){ return circles.map(function(item , index){ return new Circle(item.x <= 10 ? 10 : (item.x >= 1110 ? 1110 : item.x) , item.y >=115 ? 115 : (item.y <= 10 ? 10 : item.y) ,item.radius )
})
}//传说中的
//画场景function drawScene() { //清空画布
clear();
ctx.beginPath();
ctx.moveTo(0, 65);
ctx.lineTo(circles[0].x, circles[0].y); for (var i=0; i<circles.length; i++) {
ctx.lineTo(circles[i].x, circles[i].y);
}
ctx.lineTo(1120, 65);
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(27, 138, 203, 1.00)';
ctx.stroke(); // 画边界,用直线连接所有圆心
//画出所有的圆,滑过的圆半径稍大
for (var i=0; i<circles.length; i++) {
drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 12 : 9 , (hoveredCircle == i) ? 'rgba(27, 138, 203, 1.00)' : 'rgba(198, 199, 199, 1.00)' );
}
}//初始化window.=function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d'); var circleRadius = 15;//每个小圆的半径
var width = canvas.width; var height = canvas.height; var circlesCount = 5; // 圆的数目
for (var i=0; i<defaultCircles.length; i++) { var x = defaultCircles[i].x;//随机的圆心坐标
var y = defaultCircles[i].y;
circles.push(new Circle(x,y,circleRadius));
} //鼠标按下事件,这是传统的事件绑定,它非常简单而且稳定,适应不同浏览器.e表示事件,this指向当前元素.
canvas.onmousedown =function(e) { var e = window.event || e var rect = this.getBoundingClientRect(); var mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
var mouseY =e.clientY - rect.top; for (var i=0; i<circles.length; i++) { //检查每一个圆，看鼠标是否落在其中
var circleX = circles[i].x; var circleY = circles[i].y; var radius = circles[i].radius; if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
selectedCircle = i;//选中此圆
break;
}
}
} //鼠标移动
canvas.onmousemove=function(e) { var e = window.event || e var rect = this.getBoundingClientRect(); var mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
var mouseY =e.clientY - rect.top; if (selectedCircle != undefined) { var radius = circles[selectedCircle].radius;
circles[selectedCircle] = new Circle(mouseX, mouseY,radius); //改变选中圆的位置
}
hoveredCircle = undefined; for (var i=0; i<circles.length; i++) { // 检查每一个圆，看鼠标是否滑过
var circleX = circles[i].x; var circleY = circles[i].y; var radius = circles[i].radius; if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
hoveredCircle = i;
e.target.style.cursor = 'move'
break;
}else {
e.target.style.cursor = 'initial'
}
}
} //鼠标松开
canvas.onmouseup =function(e) {
circles = renderCircle(circles);
selectedCircle = undefined;
}; //鼠标离开，清除定时器，提高性能
canvas.onmouseout =function(e) {
selectedCircle = undefined;
circles = renderCircle(circles);
clearInterval(Timer)
}; //鼠标进入，开启30渲染
canvas.onmouseenter =function(e) {
Timer = setInterval(drawScene, 30);
};
Timer = setInterval(drawScene, 30);
}如此。代码就写完了。
作者：二月长河
链接：https://www.jianshu.com/p/59735c905eef