<!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>
<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>
</body>
</html>
Canvas绘制点与点相交线样式代码.zip
版权申诉
107 浏览量
2022-11-16
21:21:11
上传
评论
收藏 22KB ZIP 举报
Canvas绘制点与点相交线样式代码.zip （2个子文件） 
Canvas绘制点与点相交线样式代码 
Canvas绘制点与点相交线样式代码.jpg 28KB jiaoben4984 
index.html 4KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 微信小程序 - 同乐居商城：购物车合算源码
- 1、根据输入的三条边值判断能组成何种三角形，并设计测试数据进行判定覆盖测试 三条边为变量a、b、c，范围为1≤边值≤10，不在范
- SQL server 练习题目8道（小白教学）.zip
- Python 手写实现 iD3 决策树算法-根据信息增益公式.zip
- 411675952289057车联助手-小窗版(三星)3.5.1.apk
- 三种快速排序方法合并在一个文件中以便直接运行的Python代码示例
- 937712277954201实习5.word
- 2程序语言基础知识pdf1_1716337722703.jpeg
- 简单的Python示例，演示了如何使用TCP/IP协议进行基本的客户端和服务器通信
- 考试.sql
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
