• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ekran nie chce się czyścić ---JavaScript canvas

Object Storage Arubacloud
0 głosów
215 wizyt
pytanie zadane 5 marca 2017 w JavaScript przez DarthBartek Początkujący (480 p.)

Program robiony na podstawie Coding Math, jak w tytule, ekran nie chcę sie czyścić, obrazy nakładją sie na siebie.

 

////JAVASCRIPT

window.onload=function(){
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		width=canvas.width=window.innerWidth,
		height=canvas.height=window.innerHeight;
		
	var x1=Math.random()*width,
			y1=Math.random()*height;
	
	context.translate(width/2,height/2);
	context.scale(1,-1);
		
	
	var angleSpeed=1;
	
	var phase=0;
		render();
	
	function render(){
		
		context.clearRect(0, 0, width, height);
		
		line(-width/2,0,width/2,0);
		line(0,height/2,0,-height/2);
		waves(phase);
		phase+=angleSpeed;
		requestAnimationFrame(render);
	}
	
	function line(X1,Y1,X2,Y2){
		context.beginPath();
		context.moveTo(X1,Y1);
		context.lineTo(X2,Y2);
		context.stroke();
		context.closePath();
	}
	function waves(phaseAngle){
		phaseAngle=phaseAngle/180*Math.PI;
		for(var angle =-2.6*Math.PI;angle<2.5*Math.PI;angle+=0.001){
			var x=angle*100;
			var y1=Math.sin(angle)*100;
			var y2=Math.sin(angle+phaseAngle)*100;
			var interference=y2+y1;
			
			context.beginPath();
			context.fillStyle="#00FF00";
			context.fillRect(x,y1,1,1);
			context.closePath();
			
			context.beginPath() ;
			context.fillStyle="#0000FF";
			context.fillRect(x,y2,1,1);
			context.closePath();
		
			context.beginPath() ;
			context.fillStyle="#FF0000";
			context.fillRect(x,interference,1,1);
			context.closePath();
		}
	}
};


/////HTMl
<!DOCTYPE html>
<html>
<head>
	<title>Nooo</title>
	<script type="text/javascript" src="main.js"></script>
	<style type="text/css">
	html, body {
		margin: 0px;
	}
	canvas {
		display: block;
	}
	</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

 

1 odpowiedź

+1 głos
odpowiedź 5 marca 2017 przez niezalogowany
wybrane 7 marca 2017 przez DarthBartek
 
Najlepsza

Wstaw

context.clearRect(-width / 2, -height / 2, width, height);

zamiast

context.clearRect(0, 0, width, height);

 

Podobne pytania

0 głosów
1 odpowiedź 202 wizyt
+1 głos
1 odpowiedź 156 wizyt

92,762 zapytań

141,686 odpowiedzi

320,499 komentarzy

62,106 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...