Когда я добавляю несколько канвасов, то другие игнорируют местоположение, которое им указано, втф?

Question

IninsaY @IninsaY

HTML
Canvas

Когда я добавляю несколько канвасов, то другие игнорируют местоположение, которое им указано, втф?

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Вёрстка по псд</title>
	<link rel="stylesheet" href="style.css">
	<style>
		.a1 {
			height: 300px;
		}
		.a2 {
			font-size: 50px;
			font-family: Bold;
			color: white;
			text-align: center;
			line-height: 0.5em;
			margin-top: 125px;
		}
		.a3 {
			color: darkblue;
			text-align: center;
			font-family: Bold;
			line-height: 0em;
		}
		.a4	{
			margin-left: 630px;
			margin-top: -220px;
			size: 500px;
		}
		.a5 {
			width: 180px;
			height: 30px;
		}
		.a6 {
			background-color: orange;
			color: white;
			border-color: orange;
			height: 35px;
		}
		.a7 {
			color: white;
			font-family: Bold;
			margin-left: 610px;	
			margin-top: 300px;
			word-spacing: 15px;
			position: relative;
		}	
		.a8 {
			margin-left: 550px;
			margin-top: -140px;
		}
		.a9 {
			margin-left: 600px;
			margin-top: -150px;
		}
		.a10 {
			margin-left: 650px;
			margin-top: -150px;
		}
	</style>
	<script> 
  		window.onload = function() {
   		var drawingCanvas = document.getElementById('circle1');
   	 	if(drawingCanvas && drawingCanvas.getContext) {
   	 	var context = drawingCanvas.getContext('2d');
     	// Рисуем окружность 
     	context.strokeStyle = "#538ec2";
     	context.fillStyle = "#538ec2";
     	context.beginPath();
     	context.arc(100,100,50,0,Math.PI*2,true);
     	context.closePath();
    	 context.stroke();
    	 context.fill();
    		}
  	 	}
  	 	  		window.onload = function() {
   		var drawingCanvas = document.getElementById('circle2');
   	 	if(drawingCanvas && drawingCanvas.getContext) {
   	 	var context = drawingCanvas.getContext('2d');
     	// Рисуем окружность 
     	context.strokeStyle = "#538ec2";
     	context.fillStyle = "#538ec2";
     	context.beginPath();
     	context.arc(100,100,50,0,Math.PI*2,true);
     	context.closePath();
    	 context.stroke();
    	 context.fill();
    		}
  	 	}
  	 	  		window.onload = function() {
   		var drawingCanvas = document.getElementById('circle3');
   	 	if(drawingCanvas && drawingCanvas.getContext) {
   	 	var context = drawingCanvas.getContext('2d');
     	// Рисуем окружность 
     	context.strokeStyle = "#538ec2";
     	context.fillStyle = "#538ec2";
     	context.beginPath();
     	context.arc(100,100,50,0,Math.PI*2,true);
     	context.closePath();
    	 context.stroke();
    	 context.fill();
    		}
  	 	}
  </script>
</head>
<body>
 	<div class="a1">
 		<h1 class= "a2">COMING   SOON</h1>
 		<p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
 	</div>
 	<div>
 		<form action="input1.php" name="test" method="post" class="a4">
 			<input class="a5" type="email" name="email" placeholder ="Type your e-mail adress">
 			<input class="a6" type="submit" value="Subscribe">
 		</form>
	</div>
	<div class="a7">
		<h1>DAYS HOURS MINS</h1>
	</div>
	<div class="a8">
		<canvas id="circle1" width="180" height="180">
    		<p>Ваш браузер не поддерживает рисование.</p>
  		</canvas>
  	</div>
  	<div class="a9">
		<canvas id="circle2" width="250" height="250">
    		<p>Ваш браузер не поддерживает рисование.</p>
  		</canvas>
  	</div>
  	<div class="a10">
		<canvas id="circle3" width="200" height="200">
    		<p>Ваш браузер не поддерживает рисование.</p>
  		</canvas>
  	</div>
</body>
</html>

Вопрос задан более трёх лет назад
58 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

15 комментариев

IninsaY @IninsaY Автор вопроса

Спасибо, но что-то все ровно не так, появилось 2, но 3 так и нету.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Вёрстка по псд</title>
	<link rel="stylesheet" href="style.css">
	<style>
		.a1 {
			height: 300px;
		}
		.a2 {
			font-size: 50px;
			font-family: Bold;
			color: white;
			text-align: center;
			line-height: 0.5em;
			margin-top: 125px;
		}
		.a3 {
			color: darkblue;
			text-align: center;
			font-family: Bold;
			line-height: 0em;
		}
		.a4	{
			margin-left: 630px;
			margin-top: -220px;
			size: 500px;
		}
		.a5 {
			width: 180px;
			height: 30px;
		}
		.a6 {
			background-color: orange;
			color: white;
			border-color: orange;
			height: 35px;
		}
		.a7 {
			color: white;
			font-family: Bold;
			margin-left: 610px;	
			margin-top: 300px;
			word-spacing: 15px;
			position: relative;
		}	
		.a8 {
			margin-left: 550px;
			margin-top: -140px;
		}
		.a9 {
			margin-left: 600px;
			margin-top: -200px;
		}
		.a10 {
			margin-left: 650px;
			margin-top: -230px;
		}
	</style>
	<script> 
  		window.onload = function() {
   		var drawingCanvas = document.getElementById('circle1');
   	 	if(drawingCanvas && drawingCanvas.getContext) {
   	 	var context = drawingCanvas.getContext('2d');
     	// Рисуем окружность 
     	context.strokeStyle = "#538ec2";
     	context.fillStyle = "#538ec2";
     	context.beginPath();
     	context.arc(100,100,50,0,Math.PI*2,true);
     	context.closePath();
    	 context.stroke();
    	 context.fill();
    		}
  	 	}
  	 	  		window.addEventListener = function() {
   		var drawingCanvas = document.getElementById('circle2');
   	 	if(drawingCanvas && drawingCanvas.getContext) {
   	 	var context = drawingCanvas.getContext('2d');
     	// Рисуем окружность 
     	context.strokeStyle = "#538ec2";
     	context.fillStyle = "#538ec2";
     	context.beginPath();
     	context.arc(100,100,50,0,Math.PI*2,true);
     	context.closePath();
    	 context.stroke();
    	 context.fill();
    		}
  	 	}
  	 	  		window.addEventListener = function() {
   		var drawingCanvas = document.getElementById('circle3');
   	 	if(drawingCanvas && drawingCanvas.getContext) {
   	 	var context = drawingCanvas.getContext('2d');
     	// Рисуем окружность 
     	context.strokeStyle = "#538ec2";
     	context.fillStyle = "#538ec2";
     	context.beginPath();
     	context.arc(100,100,50,0,Math.PI*2,true);
     	context.closePath();
    	 context.stroke();
    	 context.fill();
    		}
  	 	}
  	</script>
</head>
<body>
 	<div class="a1">
 		<h1 class= "a2">COMING   SOON</h1>
 		<p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
 	</div>
 	<div>
 		<form action="input1.php" name="test" method="post" class="a4">
 			<input class="a5" type="email" name="email" placeholder ="Type your e-mail adress">
 			<input class="a6" type="submit" value="Subscribe">
 		</form>
	</div>
	<div class="a7">
		<h1>DAYS HOURS MINS</h1>
	</div>
	<div class="a8">
		<canvas id="circle1" width="180" height="180">
    		<p>Ваш браузер не поддерживает рисование.</p>
  		</canvas>
  	</div>
  	<div class="a9">
		<canvas id="circle2" width="250" height="250">
    		<p>Ваш браузер не поддерживает рисование.</p>
  		</canvas>
  	</div>
  	<div class="a10">
		<canvas id="circle3" width="200" height="200">
    		<p>Ваш браузер не поддерживает рисование.</p>
  		</canvas>
  	</div>
</body>
</html>

Написано более трёх лет назад

Даниил Братухин @dantothefuture

IninsaY, addEventListener — это метод :) Вместо этого:

window.addEventListener = function() {
  // обработчик
})

Нужно писать:

window.addEventListener("load", function() {
  // обработчик
})

Или:

document.addEventListener("DOMContentLoaded", function() {
  // обработчик
})

Написано более трёх лет назад

IninsaY @IninsaY Автор вопроса

Даниил Братухин, либо я тупой, либо я не знаю... Если вам не сложно, можете сделать, чтобы было видно 3 круга?

Написано более трёх лет назад
Даниил Братухин @dantothefuture

IninsaY, стили не менял, правьте сами snippet

Написано более трёх лет назад
IninsaY @IninsaY Автор вопроса

Даниил Братухин, а в каком редакторе вы работали? Я уверен, что правильно скопировал, но всё ровно не работает, у меня Sublime Text 3

Написано более трёх лет назад
Даниил Братухин @dantothefuture

IninsaY, прямо в JSFiddle накидал. От редактора не может зависеть, где-то у вас ошибка (код покажите что ли...)

Написано более трёх лет назад

IninsaY @IninsaY Автор вопроса

Вот

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Вёрстка по псд</title>
	<link rel="stylesheet" href="style.css">
	<link rel="alternate" href="index.js">
</head>
<body>
	<div class="a1">
 		 <h1 class="a2">COMING SOON</h1>
 		 <p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
	</div>
	<div>
  		<form action="input1.php" name="test" method="post" class="a4">
   			 <input class="a5" type="email" name="email" placeholder="Type your e-mail adress">
  			  <input class="a6" type="submit" value="Subscribe">
  		</form>
	</div>
	<div class="a7">
 		 <h1>DAYS HOURS MINS</h1>
	</div>
	<div class="a8">
 		 <canvas id="circle1" width="180" height="180">
   			 <p>Ваш браузер не поддерживает рисование.</p>
 		 </canvas>
	</div>
	<div class="a9">
  		<canvas id="circle2" width="250" height="250">
    		<p>Ваш браузер не поддерживает рисование.</p>
  		</canvas>
	</div>
	<div class="a10">
  		<canvas id="circle3" width="200" height="200">
    		<p>Ваш браузер не поддерживает рисование.</p>
  		</canvas>
	</div>
</body>
</html>

body {
	background: url(img/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: 100%;
   	-moz-background-size: 100%;
  	-o-background-size: 100%;
    background-size: 100%;
}
.a1 {
  height: 300px;
}

.a2 {
  font-size: 50px;
  font-family: Bold;
  color: white;
  text-align: center;
  line-height: 0.5em;
  margin-top: 125px;
}

.a3 {
  color: darkblue;
  text-align: center;
  font-family: Bold;
  line-height: 0em;
}

.a4 {
  margin-left: 630px;
  margin-top: -220px;
  size: 500px;
}

.a5 {
  width: 180px;
  height: 30px;
}

.a6 {
  background-color: orange;
  color: white;
  border-color: orange;
  height: 35px;
}

.a7 {
  color: white;
  font-family: Bold;
  margin-left: 610px;
  margin-top: 300px;
  word-spacing: 15px;
  position: relative;
}

.a8 {
  margin-left: 550px;
  margin-top: -140px;
}

.a9 {
  margin-left: 600px;
  margin-top: -150px;
}

.a10 {
  margin-left: 650px;
  margin-top: -150px;
}

window.addEventListener("load", function() {
  var drawingCanvas = document.getElementById('circle1');
  if (drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    // Рисуем окружность 
    context.strokeStyle = "#538ec2";
    context.fillStyle = "#538ec2";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
  }
})

window.addEventListener("load", function() {
  var drawingCanvas = document.getElementById('circle2');
  if (drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    // Рисуем окружность 
    context.strokeStyle = "#538ec2";
    context.fillStyle = "#538ec2";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
  }
})

window.addEventListener("load", function() {
  var drawingCanvas = document.getElementById('circle3');
  if (drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    // Рисуем окружность 
    context.strokeStyle = "#538ec2";
    context.fillStyle = "#538ec2";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
  }
})

Написано более трёх лет назад

Даниил Братухин @dantothefuture

IninsaY, если js в отдельном файле, то нужно дописать <script src="путь/к/файлу.js"></script> в head.

Написано более трёх лет назад
IninsaY @IninsaY Автор вопроса
Даниил Братухин, видимо, я проклят, всё ровно не работает
<script type="text/javascript" src="PSD-шники/2/index.js"></script>
Написано более трёх лет назад
Даниил Братухин @dantothefuture
IninsaY, src точно правильный? Если html и js файлы в одной папке лежат, то можно указать просто
<script type="text/javascript" src="index.js"></script>
.
Написано более трёх лет назад

IninsaY @IninsaY Автор вопроса

Да, путь был правильный, я снёс всё и скопировал ваше на пустой документ и заново написал боди и хеад, 3 круга появилось, но появилась ещё проблема, размеры кругов не увеличиваются.

<html>
  <head>
    <meta charset="UTF-8">  
    <title>Название</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <div class="a1">
      <h1 class="a2">COMING SOON</h1>
      <p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
    </div>
    <div>
       <form action="input1.php" name="test" method="post" class="a4">
        <input class="a5" type="email" name="email" placeholder="Type your e-mail adress">
        <input class="a6" type="submit" value="Subscribe">
      </form>
    </div>
    <div class="a7">
      <h1>DAYS HOURS MINS</h1>
    </div>
    <div class="a8">
      <canvas id="circle1" width="180" height="180">
       <p>Ваш браузер не поддерживает рисование.</p>
     </canvas>
    </div>
    <div class="a9">
       <canvas id="circle2" width="350" height="350">
        <p>Ваш браузер не поддерживает рисование.</p>
       </canvas>
    </div>
    <div class="a10">
      <canvas id="circle3" width="200" height="200">
        <p>Ваш браузер не поддерживает рисование.</p>
     </canvas>
    </div>
  </body>
</html>

Написано более трёх лет назад

Даниил Братухин @dantothefuture
IninsaY, чтобы круг занимал весь canvas, нужно прописать это в коде:
context.arc(drawingCanvas.width / 2, drawingCanvas.height / 2, drawingCanvas.width / 2, 0, Math.PI * 2, true);
Написано более трёх лет назад
IninsaY @IninsaY Автор вопроса

Даниил Братухин, где именно?

Написано более трёх лет назад
Даниил Братухин @dantothefuture

IninsaY, везде вместо context.arc(100, 100, 50, 0, Math.PI * 2, true);

Написано более трёх лет назад
IninsaY @IninsaY Автор вопроса

Даниил Братухин, оооо, да, наконец-то, спасибо вам большое

Написано более трёх лет назад