先上效果圖
不知道為什么喜歡用元芳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;
}
//清除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<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.onload=function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
var circleRadius = 15;//每個小圓的半徑
var width = canvas.width;
var height = canvas.height;
var circlesCount = 5; // 圓的數(shù)目
for (var i=0; i<defaultCircles.length; i++) {
var x = defaultCircles[i].x;//隨機(jī)的圓心坐標(biāo)
var y = defaultCircles[i].y;
circles.push(new Circle(x,y,circleRadius));
}
//鼠標(biāo)按下事件,這是傳統(tǒng)的事件綁定,它非常簡單而且穩(wěn)定,適應(yīng)不同瀏覽器.e表示事件,this指向當(dāng)前元素.
canvas.onmousedown =function(e) {
var e = window.event || e
var rect = this.getBoundingClientRect();
var mouseX =e.clientX - rect.left;//獲取鼠標(biāo)在canvsa中的坐標(biāo)
var mouseY =e.clientY - rect.top;
for (var i=0; i<circles.length; i++) { //檢查每一個圓陵像，看鼠標(biāo)是否落在其中
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;
}
}
}
//鼠標(biāo)移動
canvas.onmousemove=function(e) {
var e = window.event || e
var rect = this.getBoundingClientRect();
var mouseX =e.clientX - rect.left;//獲取鼠標(biāo)在canvsa中的坐標(biāo)
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++) { // 檢查每一個圓就珠，看鼠標(biāo)是否滑過
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'
}
}
}
//鼠標(biāo)松開
canvas.onmouseup =function(e) {
circles = renderCircle(circles);
selectedCircle = undefined;
};
//鼠標(biāo)離開，清除定時器醒颖，提高性能
canvas.onmouseout =function(e) {
selectedCircle = undefined;
circles = renderCircle(circles);
clearInterval(Timer)
};
//鼠標(biāo)進(jìn)入妻怎，開啟30渲染
canvas.onmouseenter =function(e) {
Timer = setInterval(drawScene, 30);
};
Timer = setInterval(drawScene, 30);
}
如此。代碼就寫完了泞歉。
再次附上demo地址
