|
|
| Line 1: |
Line 1: |
| <script>
| | <canvas id="canvas" width="750" height="390"></canvas> |
| | |
| //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE.
| |
| var context=document.getElementById("canvas");
| |
| var canvasWidth=context.width;
| |
| var canvasHeight= context.height;
| |
| var fogCount=15;
| |
| var fog=new Image();
| |
| var mountain=new Image();
| |
| var fogs=[];
| |
| var FPS=20;
| |
| var maxVel=1;
| |
| | |
| fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png";
| |
| mountain.src="https://s27.postimg.org/4j5c7127n/mac2.jpg" ;
| |
| | |
| | |
| function fogPart(){
| |
| this.x=0;
| |
| this.y=0;
| |
| this.xVel=0;
| |
| this.yVel=0;
| |
| this.radius=5;
| |
| this.draw=function(){
| |
| context.drawImage(this.image,this.x-100,this.y-100);
| |
| | |
| };
| |
| this.update=function(){
| |
| | |
| this.x += this.xVel;
| |
| this.y += this.yVel;
| |
| | |
| | |
| if (this.x >= canvasWidth) {
| |
| this.xVel = -this.xVel;
| |
| this.x = canvasWidth;
| |
| }
| |
|
| |
| else if (this.x <= 0) {
| |
| this.xVel = -this.xVel;
| |
| this.x = 0;
| |
| }
| |
| | |
| | |
| if (this.y >= canvasHeight) {
| |
| this.yVel = -this.yVel;
| |
| this.y = canvasHeight;
| |
| }
| |
|
| |
|
| |
| else if (this.y <= 0) {
| |
| this.yVel = -this.yVel;
| |
| this.y = 0;
| |
| }
| |
| };
| |
| | |
| this.setImage=function(img){
| |
| this.image=img;
| |
| };
| |
| this.setPos = function(x, y) {
| |
| this.x = x;
| |
| this.y = y;
| |
| };
| |
| | |
|
| |
| this.setVel = function(x, y) {
| |
| this.xVel = x;
| |
| this.yVel = y;
| |
| };
| |
| | |
| | |
| };
| |
| | |
| function random(min, max){
| |
| return Math.random() * (max - min) + min;
| |
| }
| |
| function init() {
| |
| if (canvas.getContext) {
| |
| context = canvas.getContext('2d');
| |
| for(var i=0; i < fogCount; i++){
| |
| var fog = new fogPart();
| |
| | |
| fog.setPos(random(0, canvasWidth), random(0, canvasHeight));
| |
|
| |
| fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel));
| |
| fogs.push(fog);
| |
| }
| |
| }
| |
| else {
| |
| alert("UN-supported browser");
| |
| }
| |
| };
| |
| | |
| fog.onload=function(){
| |
| | |
| fogs.forEach(function(part){
| |
| part.setImage(fog);
| |
| });
| |
| | |
| };
| |
| function draw(){
| |
| | |
| context.drawImage(mountain,0,0);
| |
| context.globalAlpha = 0.09;
| |
| fogs.forEach(function(part) {
| |
| part.draw();
| |
| });
| |
| | |
| };
| |
| function update(){
| |
| fogs.forEach(function(part){
| |
| part.update();
| |
| });
| |
| | |
| };
| |
| | |
| init();
| |
| if (context) {
| |
| setInterval(function() {
| |
| update();draw();
| |
| }, 1000 / FPS);
| |
| }
| |
| | |
| | |
| </script>
| |
| | |
| <canvas id="canvas" width="750" height="390"></canvas>
| |