11524 sujets

JavaScript, DOM et API Web HTML5

Changer la couleur d'un var

Bonjour,
Je ne parviens pas à changer la couleur noire du var en blanc. Pouvez-vous m'indiquer la marche à suivre s’il vous plaît ? 

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>JS: Boid</title>


  <style id="compiled-css" type="text/css">
	html, body {
	margin:0;
	padding:0
	}
	canvas {
	display:block;
	background:#1d233b;
	}
  </style>

  
</head>
<body>
	<canvas id="canvas" width="697" height="369">

	<script type="text/javascript">//<![CDATA[


// Based on Jared Tarbell's Substrate algorithm concept.
//  http://www.complexification.net/gallery/machines/substrate/index.php
 

var Boid = function (x, y, angle) {

	this.x = x;
	this.y = y;

	this.angle = Math.pow(Math.random(), 20) + angle;
	this.dx = Math.cos(this.angle);
	this.dy = Math.sin(this.angle);

	this.life = Math.random() * 100 + 100;
	this.dead = false;

	this.update = function (data) {

		this.ox = this.x;
		this.oy = this.y;

		this.x += this.dx * 2;
		this.y += this.dy * 2;

		this.life -= 1;

		var index = ((this.x << 0) + SCREEN_WIDTH * (this.y << 0)) * 4;

		if (this.life <= 0) this.kill();
		if (data[index + 3] > 0) this.kill();

		if (this.x < 0 || this.x > SCREEN_WIDTH) this.kill();
		if (this.y < 0 || this.y > SCREEN_HEIGHT) this.kill();

	};
	
	this.draw = function(ctx){
		// if(this.life > 50) ctx.strokeStyle = "#222";
		// if(this.life > 100) ctx.strokeStyle = "#444";
		// if(this.life > 150) ctx.strokeStyle = "#666";
		ctx.beginPath();
		ctx.moveTo(this.ox, this.oy);
		ctx.lineTo(this.x, this.y);
		ctx.stroke();
	};

	this.kill = function () {
		boids.splice(boids.indexOf(this), 1);
		this.dead = true;
	};
};


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var SCREEN_WIDTH = canvas.width = window.innerWidth;
var SCREEN_HEIGHT = canvas.height = window.innerHeight;
var HALF_WIDTH = SCREEN_WIDTH / 2;
var HALF_HEIGHT = SCREEN_HEIGHT / 2;



var boids = [
	new Boid(HALF_WIDTH, HALF_HEIGHT, Math.random() * 360 * Math.PI / 180)
];

window.resize = function(){
	SCREEN_WIDTH = canvas.width = window.innerWidth;
	SCREEN_HEIGHT = canvas.height = window.innerHeight;
	HALF_WIDTH = SCREEN_WIDTH / 2;
	HALF_HEIGHT = SCREEN_HEIGHT / 2;
};


(function loop() {
	var rAF = requestAnimationFrame(loop);
	var data = ctx.getImageData(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT).data;
	

	// var i = boids.length;
	// while(i--) {
	for (var i = 0; i < boids.length; i++) {

		var boid = boids[i];
		boid.update(data);
		boid.draw(ctx);

		if (!boid.dead && Math.random() > 0.5 && boids.length < SCREEN_HEIGHT) {

			boids.push(new Boid(boid.x, boid.y, (Math.random() > 0.5 ? 90 : -90) * Math.PI / 180 + boid.angle));

		} else; // alert(true);
		

	}
	if(!boids.length) {
		cancelAnimationFrame(rAF);
		console.log(canvas.toDataURL());
	}
	
}());


  //]]></script>

</canvas></body></html>
Prévenir un modérateur
Répondre au sujet
Aller à