Canvas 绘制点线相交

随机产生一些直线，当直线相交时产生交点，直线不断移动，交点的位置也随之改变。

<!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激流勇进

Canvas 绘制点线相交相关推荐

canvas绘制飞线效果
在我们做的可视化大屏项目中,经常会遇到飞线的效果. 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现.下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果. 抛开编辑器 ...
画线标记html,markline.js——轻量级canvas绘制标记线的库
这段时间要做的是一个数据可视化的小型项目.其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起.很自然的我一开始想的就是采用百度的ec ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
带着canvas去流浪系列之五绘制K线图
[摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明使用原生canvasAPI绘制 ...
【带着canvas去流浪（5）】绘制K线图
目录一. 任务说明二. 重点提示三. 示例代码示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...
神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下: http://www.demodashi.com/demo/11636.html 前言之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效 ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
【Android 应用开发】Canvas 绘制文字 ( 文字尺寸测量 | 基线绘制 )
文章目录 I . 文字尺寸测量 II . 基线绘制 I . 文字尺寸测量 1 . 精准绘制需求 : Canvas 绘制文字时 , 有时需要精准的控制文字的绘制 , 如绘制到指定的区域 , 居中 , 或 ...

Canvas 绘制点线相交

Canvas 绘制点线相交相关推荐

最新文章

热门文章