Canvas 绘制点线相交
时间:2022-07-26
本文章向大家介绍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 ,你会更加了解这段代码的神奇,送给你,远道而来的求学者。
- poj---(2886)Who Gets the Most Candies?(线段树+数论)
- Hadoop3.0通用版集群安装高可靠详细教程
- Hadoop3.0集群安装知识
- 分布式消息队列 RocketMQ 源码分析 —— Message 顺序发送与消费
- 深入解析快速排序算法的原理及其Go语言版实现
- Hadoop3.0: YARN Resource配置说明
- GO语言利用K近邻算法实现小说鉴黄
- Why Spring Boot
- 如何使用HammerDB进行MySQL基准测试
- 一个不可思议的MySQL慢查分析与解决
- Apache Spark 2.2中基于成本的优化器(CBO)
- golang的HTTP基本认证机制实例详解
- hdu----(3065)病毒侵袭持续中(AC自动机)
- Spark机器学习库(MLlib)指南之简介及基础统计
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【CTR】ESMM:多任务联合学习
- 状态管理之Vuex (三) store利用module拆分
- MySQL 案例:无主键表产生的延迟
- 面试官真的会问:new的实现以及无new实例化
- Android Hilt实战初体验: Dagger替换成Hilt
- Linux系列之学会使用CURL命令
- 潘石屹用python解决100个问题 | 斐波那契数列
- [869]pandas的dataFrame的行列索引操作
- JSP的文件上传处理
- 将SAP CRM WebClient UI的表格导出成PDF
- java.lang.ClassNotFoundException org.w3c.dom.ElementTraversal
- docker一键部署SpringBoot项目
- 【Flutter 专题】95 图解 Dart 单线程实现异步处理之 Task Queue
- 首发基于OpenPAI细化部署 Hadoop 集群
- PhpStorm 集成 WSL 虚拟机中的 PHP 进行单元测试和代码调试