Нужно продублировать круг, но когда я делаю это, то выходит какая-то дичь, почему?

Question

IninsaY @IninsaY

HTML
CSS

Нужно продублировать круг, но когда я делаю это, то выходит какая-то дичь, почему?

<!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();
    		}
  	 	}
  </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>

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

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

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

Пригласить эксперта

Ответы на вопрос 1

2 комментария

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

Когда я начинаю рисовать на других канвасах, то расположение первого слетает, и остаётся 1 круг.

<!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>

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