Пламя

HTML

<body>
<!-- Lets make a cool flame effect -->
<canvas id="canvas"></canvas>
</body>

CSS

/*Some styles*/
* {margin: 0; padding: 0;}
#canvas {display: block;}
body{background: #4FAAFD}

JavaScript

window.onload = function(){
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	//Make the canvas occupy the full page
	var W = window.innerWidth, H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;
	
	var particles = [];
	var mouse = {};

	var image_rocket = new Image();
    image_rocket.src = 'img/rocket.png';			

	function add_rocket()
	{
        ctx.drawImage(image_rocket, mouse.x-40, mouse.y-210);
	}	
	
	
	//Lets create some particles now
	var particle_count = 100;
	for(var i = 0; i < particle_count; i++)
	{
		particles.push(new particle());
	}
	
	//finally some mouse tracking
	canvas.addEventListener('mousemove', track_mouse, false);
	
	function track_mouse(e)
	{
		//since the canvas = full page the position of the mouse 
		//relative to the document will suffice
		mouse.x = e.pageX;
		mouse.y = e.pageY;
	}
	
	function particle()
	{
		//lets change the Y speed to make it look like a flame
		this.speed = {x:-1.3+Math.random()*2.6, y: -25+Math.random()*10};
		//location = mouse coordinates
		//Now the flame follows the mouse coordinates
		if(mouse.x && mouse.y)
		{
			this.location = {x: mouse.x, y: mouse.y};
		}
		else
		{
			this.location = {x: W/2, y: H/2};
		}
		this.radius = 30+Math.random()*0;
		this.life = 5+Math.random()*10;
		this.remaining_life = this.life;
		//colors
		this.r = Math.round(Math.random()*255);
		this.g = Math.round(Math.random()*150);
		this.b = Math.round(Math.random()*50);
	}
	
	function draw()
	{
		ctx.clearRect (0, 0, W, H);

		ctx.globalCompositeOperation = "lighter";
		for(var i = 0; i < particles.length; i++)
		{
			var p = particles[i];
			ctx.beginPath();
			//changing opacity according to the life.
			//opacity goes to 0 at the end of life of a particle
			p.opacity = Math.round(p.remaining_life/p.life*100)/300
			//a gradient instead of white fill
			var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y,...