New wiki-page
mNo edit summary |
mNo edit summary |
||
Line 3: | Line 3: | ||
//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. | //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. | ||
var context=document.getElementById("canvas"); | var context=document.getElementById("canvas"); | ||
var image=document.getElementById('picture') | |||
var canvasWidth=context.width; | var canvasWidth=context.width; | ||
var canvasHeight= context.height; | var canvasHeight= context.height; | ||
var imageWidth=image.width; | |||
var imageHeight= image.height; | |||
var fogCount=10; | var fogCount=10; | ||
var fog=new Image(); | var fog=new Image(); | ||
Line 14: | Line 17: | ||
fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; | fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; | ||
picture.id = "pic"; | picture.id = "pic"; | ||
picture.src= | picture.src=image.src; | ||
function fogPart(){ | function fogPart(){ | ||
Line 101: | Line 104: | ||
function draw(){ | function draw(){ | ||
context.drawImage(picture,0,0,canvasWidth,canvasHeight | context.drawImage(picture,0,0,imageWidth,imageHeight,0,0,canvasWidth,canvasHeight,); | ||
context.globalAlpha = 0.09; | context.globalAlpha = 0.09; | ||
fogs.forEach(function(part) { | fogs.forEach(function(part) { |
Revision as of 18:02, 17 July 2017
/* Any JavaScript here will be loaded for all users on every page load. */ //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. var context=document.getElementById("canvas"); var image=document.getElementById('picture') var canvasWidth=context.width; var canvasHeight= context.height; var imageWidth=image.width; var imageHeight= image.height; var fogCount=10; var fog=new Image(); var picture=new Image(); var fogs=[]; var FPS=20; var maxVel=1; fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; picture.id = "pic"; picture.src=image.src; 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(picture,0,0,imageWidth,imageHeight,0,0,canvasWidth,canvasHeight,); 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); }