Задать вопрос
Aison
@Aison
javascript

Как сделать больше линий отрисовки canvas в этом примере?

Ребят, нашёл на codepen очень интересный эффект, который бы просто шикарно подошёл под мой дизайн-проект, но вот беда, код для меня сложный... хотелось бы увеличить количество линий с этой отрисовкой^^

хочу получить эффект печатной платы) вот эта вся прелесть будет фоном для сайта, как я и сказал ранее)) помогите, если не сложно.

ссылка на codepen

html
<html>
<head>
<link rel="stylesheet" type="text/css" href="master.css">
</head>
<body>
	<div id="mainBox">
		<canvas id="myCanvas" width="1600" height="700" style="border:1px solid #000000;">

		</div>
    <a href="williamjdesign.com"><div id="title">My Website</div></a>

		<script src="myScript.js"></script>

	</canvas>
</body>
</html>


css
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{

	background-color: black;
	position:absolute;
}
#mainBox{
	position:absolute;
	left:50%;
}
canvas{
	position:absolute;
	opacity:.6;
}
#title{
	position:absolute;
	z-index:10;
	font-family: 'Open Sans', sans-serif;
font-size:45px;
width:400px;
left:200px;
top:100px;
  color:white;
}


js
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");


var speed=1;

setInterval(drawMain,speed);


var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","white");
gradient.addColorStop("0.5","gray");
gradient.addColorStop("1.0","red");

ctx.strokeStyle="#e56";
ctx.strokeStyle=gradient;
ctx.lineWidth=2;

var x1=0;
var x2=0;
var y1=40;
var y2=180;
var x3=-900;
var y3=180;



seed1=getRandomInt(400,460);
seed2=getRandomInt(400,460);
var rightLimit=1400;
var increment=1;
function trace1(seed){
ctx.strokeStyle="#e56";
ctx.strokeStyle=gradient;

ctx.moveTo(x2,y2);
ctx.lineTo(x2+increment,y2);
if(x2>20 && x2<40){
y2=y2+increment;
}
if(x2>200 && x2<270){
	y2=y2+increment;
}

if(x2>400 && x2<seed1){
	y2=y2-increment;
}
if(x2==480){
	ctx.beginPath()
	ctx.arc(x2,y2,4,0,2*Math.PI);
	ctx.stroke();	
}
if(x2<476 || x2>484){
ctx.stroke();	
}


if(x2>600 && x2<seed1+300){
	y2=y2+increment;
}

ctx.beginPath()
x2+=increment;
if(x2>rightLimit){
	x2=0;
	y2+=getRandomInt(55,75);
	y2=180;
	//seed1=getRandomInt(400,490);
}
}
function trace2(seed){
	ctx.strokeStyle="#FFF";

ctx.moveTo(x3,y3);
ctx.lineTo(x3+1,y3);
if(x3>20 && x3<40){
y3=y3+increment;
}
if(x3>200 && x3<270){
	y3=y3+increment;
}

if(x3>400 && x3<seed1){
	y3=y3-increment;
}
if(x3==480){
	ctx.beginPath()
	ctx.arc(x3,y3,4,0,2*Math.PI);
	ctx.stroke();	
}

if(x3>600 && x3<seed1+300){
	y3=y3+increment;
}

if(x3<476 || x3>484){
ctx.stroke();	
}
ctx.beginPath()
x3+=increment;
if(x3>rightLimit){
	x3=-900;
	y3=180;
	seed2=seed1;
}
}

function drawMain(){
	trace1(seed1);
	trace2(seed1);
}
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
  • Вопрос задан
  • 77 просмотров
2 комментария
Подписаться 1 Средний 2 комментария
Решения вопроса 1
twobomb
@twobomb
Накидал настраиваемый эффект, при желании можно самому задать массив dots если хотите чтобы линии шли как-то конкретно, или поиграться с параметрами. Тоже самое с окружностями.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Арт-директор на комплексный проект посадочной страницы
17 февр. 2025, в 22:32
50000 руб./за проект
Разработать бота в телеграмм
17 февр. 2025, в 21:54
45000 руб./за проект
Создание карточек на Маркетплейсах для косметики
17 февр. 2025, в 18:36
1000 руб./за проект
Ещё заказы