JavaScript|JavaScript canvas实现动态点线效果 JavaScriptcanvas实现动态点线效果

本文实例为大家分享了JavaScript canvas实现动态点线效果的具体代码，供大家参考，具体内容如下
效果预览

文章图片

1.实现效果

画彩色点
相近的点产生连线
点线运动，遇到边界反弹
选中点，可拖动点改变位置*

【JavaScript|JavaScript canvas实现动态点线效果】2.具体实现
初始化相关变量

var c = document.getElementById("myCanvas"); //设置canvas大小c.height = document.body.offsetHeight; c.width = document.body.offsetWidth; //canvas跟随窗口大小window.onresize = function() {c.height = document.body.offsetHeight; c.width = document.body.offsetWidth; }; var theCanvas = c.getContext("2d"); var pointList = []; //存储pointsvar anim = null; var selectPoint = null;

构造对象存储相关点线数据

var PointLine = function(canvas, x, y, r, color) {this.theCanvas = canvas; this.x = x; this.y = y; this.r = r; this.color = color; //点颜色this.speed = 5; //点移动速度//移动方向this.direction = parseInt(Math.random() * 1000) % 4; //0 -x 1 x 2-y 3 ythis.drawPoint = function() {this.theCanvas.beginPath(); this.theCanvas.fillStyle = this.color; this.theCanvas.arc(this.x, this.y, this.r, 0, 360); this.theCanvas.fill(); }; //检查是否出界，若出界就改变为反方向this.checkX = function(x) {if (x - this.r <= 0) {this.x = this.r; this.direction = 1; } else if (x + this.r >= this.theCanvas.canvas.width) {this.x = this.theCanvas.canvas.width - this.r; this.direction = 0; } else this.x = x; }; this.checkY = function(y) {if (y - this.r <= 0) {this.y = this.r; this.direction = 3; } else if (y + this.r >= this.theCanvas.canvas.height) {this.y = this.theCanvas.canvas.height - this.r; this.direction = 2; } else this.y = y; }; //移动点this.movePoints = function() {if (this.direction == 0) {this.checkX(this.x - parseInt(Math.random() * this.speed)); } else if (this.direction == 1) {this.checkX(this.x + parseInt(Math.random() * this.speed)); } else if (this.direction == 2) {this.checkY(this.y - parseInt(Math.random() * this.speed)); } else if (this.direction == 3) {this.checkY(this.y + parseInt(Math.random() * this.speed)); }}; return this; };

画两点间连线

//两点间连线function drawLine(start, end) {theCanvas.strokeStyle = "rgba(204,204,204,0.5)"; theCanvas.beginPath(); theCanvas.moveTo(start.x, start.y); theCanvas.lineTo(end.x, end.y); theCanvas.stroke(); }//两点之间距离function getDistance(p1, p2) {return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2); }var minDistance = parseInt(0.1 * theCanvas.canvas.height); minDistance = minDistance * minDistance; //连线的最短距离//一点与其他点连线function drawLinkLine(p1) {for (var j = 0; j < pointList.length; j++) {var p2 = pointList[j]; if (p2.x == p1.x && p2.y == p1.y) continue; var line = getDistance(p1, p2); if (line < minDistance && line > 0) {drawLine(p1, p2); }}}

生成随机点

//生产随机颜色function randColor() {return ("rgb(" +[Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),Math.floor(Math.random() * 255)].join(",") +")"); }//生成随机点function createPoint() {var x = parseInt(Math.random() * theCanvas.canvas.width); var y = parseInt(Math.random() * theCanvas.canvas.height); var r = 5 + parseInt(Math.random() * 20); if (x - r < 0) x = r; else if (x + r > theCanvas.canvas.width) x = theCanvas.canvas.width - r; if (y - r < 0) x = r; else if (y + r > theCanvas.canvas.height)y = theCanvas.canvas.height - r; return new PointLine(theCanvas, x, y, r, randColor()); }//生成100个随机点线for (var i = 0; i < 100; i++) {pointList.push(createPoint()); }

兼容浏览器canvas动画帧

//启用动画function canvasAnimation() {return (window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback, element) {var self = this,start,finish; window.setTimeout(function() {start = +new Date(); callback(start); finish = +new Date(); self.timeout = 1000 / 60 - (finish - start); }, self.timeout); }); }//取消动画function canvasCancleAnim() {return (window.cancelAnimationFrame ||window.webkitCancelAnimationFrame ||window.mozCancelAnimationFrame ||window.mosCancelAnimationFrame ||window.clearTimeout); }

开始动画

//循环执行canvas动画function start() {anim = canvasAnimation()(this.start); //清空canvastheCanvas.clearRect(0,0,theCanvas.canvas.width,theCanvas.canvas.height); //画点线for (var i = 0; i < this.pointList.length; i++) {var p = pointList[i]; drawLinkLine(p); p.drawPoint(); if (selectPoint && selectPoint == p) continue; p.movePoints(); }}//开始动画start();

选中点进行拖动

//px坐标转canvas坐标function windowToCanvas(canvas, x, y) {var bbox = canvas.getBoundingClientRect(); return {x: x - bbox.left * (canvas.width / bbox.width),y: y - bbox.top * (canvas.height / bbox.height)}; }//设置动作，按下选中点theCanvas.canvas.onmousedown = function(e) {var loc = windowToCanvas(theCanvas.canvas, e.clientX, e.clientY); for (var i = 0; i < pointList.length; i++) {var p = pointList[i]; if (getDistance(p, loc)<100) {selectPoint = p; break; }}}; //移动点theCanvas.canvas.onmousemove = function(e) {if (selectPoint) {var loc = windowToCanvas(theCanvas.canvas, e.clientX, e.clientY); selectPoint.x = loc.x; selectPoint.y = loc.y; }}; //取消选中点theCanvas.canvas.onmouseup = function(e) {selectPoint = null; };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。