元芳，Js连线支持随意拖，难吗？

先上效果图

不知道为什么喜欢用元芳2个字！如果都要世界都要元芳来看，感觉元芳要忙不过来！

cav1.gif

在上demo下载地址

https://github.com/976500133/CanvasCurve

分析

1.需要canvas 事件支持
canvas 支持
onmouseenter
onmousedown
onmousemove
onmouseup
onmouseout
事件等

2.最终这个效果是每次30/1000 s 清空画布重置的效果。

上代码，程序员就是这么干脆，说多了没意思

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;
}

//清除canvas
function 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

如此。代码就写完了。

再次附上demo地址

https://github.com/976500133/CanvasCurve