随机产生一些直线，当直线相交时产生交点，直线不断移动，交点的位置也随之改变。
<!doctype html><html><head><meta charset="utf-8"><title>Canvas绘制点线相交</title><style>body {background-color: #eee;overflow: hidden;}canvas {background-color: #eee;display: block;margin: 0 auto;}</style></head><body><canvas id="canvas"></canvas></body><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var cw = canvas.width = window.innerWidth,cx = cw / 2;var ch = canvas.height = window.innerHeight,cy = ch / 2;ctx.fillStyle = "#000";var linesNum = 16;var linesRy = [];var requestId = null;function Line(flag) {this.flag = flag;this.a = {};this.b = {};if (flag == "v") {this.a.y = 0;this.b.y = ch;this.a.x = randomIntFromInterval(0, ch);this.b.x = randomIntFromInterval(0, ch);} else if (flag == "h") {this.a.x = 0;this.b.x = cw;this.a.y = randomIntFromInterval(0, cw);this.b.y = randomIntFromInterval(0, cw);}this.va = randomIntFromInterval(25, 100) / 100;this.vb = randomIntFromInterval(25, 100) / 100;this.draw = function() {ctx.strokeStyle = "#ccc";ctx.beginPath();ctx.moveTo(this.a.x, this.a.y);ctx.lineTo(this.b.x, this.b.y);ctx.stroke();}this.update = function() {if (this.flag == "v") {this.a.x += this.va;this.b.x += this.vb;} else if (flag == "h") {this.a.y += this.va;this.b.y += this.vb;}this.edges();}this.edges = function() {if (this.flag == "v") {if (this.a.x < 0 || this.a.x > cw) {this.va *= -1;}if (this.b.x < 0 || this.b.x > cw) {this.vb *= -1;}} else if (flag == "h") {if (this.a.y < 0 || this.a.y > ch) {this.va *= -1;}if (this.b.y < 0 || this.b.y > ch) {this.vb *= -1;}}}}for (var i = 0; i < linesNum; i++) {var flag = i % 2 == 0 ? "h" : "v";var l = new Line(flag);linesRy.push(l);}function Draw() {requestId = window.requestAnimationFrame(Draw);ctx.clearRect(0, 0, cw, ch);for (var i = 0; i < linesRy.length; i++) {var l = linesRy[i];l.draw();l.update();}for (var i = 0; i < linesRy.length; i++) {var l = linesRy[i];for (var j = i + 1; j < linesRy.length; j++) {var l1 = linesRy[j]Intersect2lines(l, l1);}}}function Init() {linesRy.length = 0;for (var i = 0; i < linesNum; i++) {var flag = i % 2 == 0 ? "h" : "v";var l = new Line(flag);linesRy.push(l);}if (requestId) {window.cancelAnimationFrame(requestId);requestId = null;}cw = canvas.width = window.innerWidth,cx = cw / 2;ch = canvas.height = window.innerHeight,cy = ch / 2;Draw();};setTimeout(function() {Init();addEventListener('resize', Init, false);}, 15);function Intersect2lines(l1, l2) {var p1 = l1.a,p2 = l1.b,p3 = l2.a,p4 = l2.b;var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;var x = p1.x + ua * (p2.x - p1.x);var y = p1.y + ua * (p2.y - p1.y);if (ua > 0 && ub > 0) {markPoint({x: x,y: y})}}function markPoint(p) {ctx.beginPath();ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);ctx.fill();}function randomIntFromInterval(mn, mx) {return ~~(Math.random() * (mx - mn + 1) + mn);}</script></html>
无论是Canvas 还是别的，前端的学习总是妙趣横生，只要思想在不断进步，技术就会一次次的突破。如果你学习过Canvas ，你会更加了解这段代码的神奇，送给你，远道而来的求学者。
推荐阅读：
线条动画
怦然心动
阿波罗的轻语
游动的花花肠子
V3.14激流勇进
