我正在尋找 JavaScript 中的縮放函式。在我的畫布中，有一些移動點通過一條三角形的線相互連接（請查看下面的代碼片段以更好地理解。）
我正在尋找的是，每當兩個移動點越來越近時，它們的對應線應該更粗。
遠處的兩個連接點=細線，
兩個靠近的連接點=粗線
我更喜歡使用純 JavaScript，然后使用庫或類似的東西，我可能不會理解。
對檔案的評論很少。它應該有助于更好地解釋我的代碼
body {
background-color: #000000;
}
canvas {
padding: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #111416;
/*background-color: white; */
border: 10px solid #37c7f7;
border-style: double;
box-shadow: 0 0 20px 5px #37c7f7;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="canvas.css">
<canvas id="myCanvas" width="700" height="700"></canvas>
<script>
// Get id from the canvas element
var canvas = document.getElementById("myCanvas");
// Provide 2D rendering context for the drawing surface of canvas
var context = canvas.getContext("2d");
// Get width and height of the canvas element
var canvW = document.getElementById("myCanvas").width;
var canvH = document.getElementById("myCanvas").height;
// Create a random range of numbers
const randomRange = (min, max) => {
return Math.random () * (max - min) min;
}
// Create empty array called
const agents = [];
// Class = Create multiple objects with the same properties
class Point {
// Build the new object and pass parameters
constructor(x, y){
// Define properties
// "this" refers to the scope of the class
// class point contains propertie x and y
this.x = x;
this.y = y;
}
// "v" stands for vector
//Connecting the moving points into a triangle
getDistance(v){
const dx = this.x - v.x;
const dy = this.y - v.y;
// Phytagorean Theorem
return Math.sqrt(dx*dx dy*dy);
}
}
// Separate point from canvas
// Make dot a new entity
// Create another class
class Agent {
constructor(x, y){
// First property is position using x and y parameters
this.pos = new Point(x, y);
// Define velocity of point.
this.vel = new Point(randomRange(-0.75, 0.75), randomRange(-0.75, 0.75));
// Create points with random radius
this.radius = randomRange(4, 12);
}
// Generated points are bouncing off from the edge of the canvas
bounce(canvW, canvH) {
if (this.pos.x <= 0 || this.pos.x >= canvW) this.vel.x *= -1;
if (this.pos.y <= 0 || this.pos.y >= canvH) this.vel.y *= -1;
}
update() {
this.pos.x = this.vel.x;
this.pos.y = this.vel.y;
}
// Create new method called draw
// Pass paramter as reference to the context
draw (context) {
// Draw the points
context.save();
context.translate(this.pos.x, this.pos.y);
context.beginPath();
context.arc(0, 0, this.radius, 0, Math.PI * 2);
context.lineWidth = 2;
context.fillStyle = "#37c7f7";
context.fill();
context.stroke();
context.restore();
for (let i = 0; i < agents.length; i ){
const agent = agents[i];
for(let j = i 1; j < agents.length; j ){
const other = agents[j];
//Get distance between the moving points
const dist = agent.pos.getDistance(other.pos);
// If distance greater than the number, do not connect the lines
if (dist > 200) continue;
// Connecting the moving points with lines
context.beginPath();
context.moveTo(agent.pos.x, agent.pos.y);
context.lineTo(other.pos.x, other.pos.y);
context.stroke();
context.strokeStyle = "#37c7f7";
}
}
}
}
// Create random number of points using a for loop
for (let i =0; i<40; i ){
const x = randomRange(0, canvW);
const y = randomRange(0, canvH);
// push adds new items to the end of an array
// push changes the length of an array
// push returns the new length
agents.push(new Agent (x, y));
}
// Drawing and updating the animation process
const animate = () => {
context.save();
context.fillStyle = "#111416";
context.fillRect(0, 0, canvW, canvH);
context.restore();
agents.forEach(agent => {
agent.draw(context);
agent.update();
agent.bounce(canvW, canvH);
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>uj5u.com熱心網友回復：
這可以通過將兩個連接點之間的距離標準化到某個固定范圍來完成，在這種情況下0..radius看起來很好：
body {
background-color: #000000;
}
canvas {
padding: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #111416;
/*background-color: white; */
border: 10px solid #37c7f7;
border-style: double;
box-shadow: 0 0 20px 5px #37c7f7;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="canvas.css">
<canvas id="myCanvas" width="700" height="700"></canvas>
<script>
// Get id from the canvas element
var canvas = document.getElementById("myCanvas");
// Provide 2D rendering context for the drawing surface of canvas
var context = canvas.getContext("2d");
// Get width and height of the canvas element
var canvW = document.getElementById("myCanvas").width;
var canvH = document.getElementById("myCanvas").height;
// Create a random range of numbers
const randomRange = (min, max) => {
return Math.random () * (max - min) min;
}
// Create empty array called
const agents = [];
// Class = Create multiple objects with the same properties
class Point {
// Build the new object and pass parameters
constructor(x, y){
// Define properties
// "this" refers to the scope of the class
// class point contains propertie x and y
this.x = x;
this.y = y;
}
// "v" stands for vector
//Connecting the moving points into a triangle
getDistance(v){
const dx = this.x - v.x;
const dy = this.y - v.y;
// Phytagorean Theorem
return Math.sqrt(dx*dx dy*dy);
}
}
// Separate point from canvas
// Make dot a new entity
// Create another class
class Agent {
constructor(x, y){
// First property is position using x and y parameters
this.pos = new Point(x, y);
// Define velocity of point.
this.vel = new Point(randomRange(-0.75, 0.75), randomRange(-0.75, 0.75));
// Create points with random radius
this.radius = randomRange(4, 12);
}
// Generated points are bouncing off from the edge of the canvas
bounce(canvW, canvH) {
if (this.pos.x <= 0 || this.pos.x >= canvW) this.vel.x *= -1;
if (this.pos.y <= 0 || this.pos.y >= canvH) this.vel.y *= -1;
}
update() {
this.pos.x = this.vel.x;
this.pos.y = this.vel.y;
}
// Create new method called draw
// Pass paramter as reference to the context
draw (context) {
// Draw the points
context.save();
context.translate(this.pos.x, this.pos.y);
context.beginPath();
context.arc(0, 0, this.radius, 0, Math.PI * 2);
context.lineWidth = 2;
context.fillStyle = "#37c7f7";
context.fill();
context.stroke();
context.restore();
for (let i = 0; i < agents.length; i ){
const agent = agents[i];
for(let j = i 1; j < agents.length; j ){
const other = agents[j];
//Get distance between the moving points
const dist = agent.pos.getDistance(other.pos);
// If distance greater than the number, do not connect the lines
if (dist > 200) continue;
const r = this.radius;
// Connecting the moving points with lines
context.beginPath();
context.moveTo(agent.pos.x, agent.pos.y);
context.lineTo(other.pos.x, other.pos.y);
context.strokeStyle = "#37c7f7";
context.lineWidth = r * (1 - (dist - r) / (200 - r));
context.stroke();
}
}
}
}
// Create random number of points using a for loop
for (let i =0; i<40; i ){
const x = randomRange(0, canvW);
const y = randomRange(0, canvH);
// push adds new items to the end of an array
// push changes the length of an array
// push returns the new length
agents.push(new Agent (x, y));
}
// Drawing and updating the animation process
const animate = () => {
context.save();
context.fillStyle = "#111416";
context.fillRect(0, 0, canvW, canvH);
context.restore();
agents.forEach(agent => {
agent.draw(context);
agent.update();
agent.bounce(canvW, canvH);
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>uj5u.com熱心網友回復：
解決此問題的一種方法是使用dist代理之間的值來確定線寬。在這里，我確保寬度至少為 1 并使用 100 變數進行播放。
...
if (dist > 200) continue;
...
context.stroke();
context.lineWidth = dist / 100 1;
context.strokeStyle = "#37c7f7";
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/518655.html