១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <body>
<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'></canvas><script type='text/javascript'>
//<![CDATA[
window.onload=function(){var t,i,s=document.getElementById("canvas"),h=s.getContext("2d"),e=window.innerWidth,a=window.innerHeight,n=[],o=[],r=120,d=20,c=0,p=30,g=0,l=0,u=!1;s.width=e,s.height=a;var y=new Audio("#");function f(t,i){return t+Math.random()*(i-t)}function v(t,i,s,h){return Math.sqrt((t-s)*(t-s)+(i-h)*(i-h))}function b(t,i,s,h){for(this.x=t,this.y=i,this.sx=t,this.sy=i,this.tx=s,this.ty=h,this.distanceToTarget=v(t,i,s,h),this.distanceTraveled=0,this.coordinates=[],this.coordinateCount=2;this.coordinateCount--;)this.coordinates.push([this.x,this.y]);this.angle=Math.atan2(h-i,s-t),this.speed=1,this.acceleration=1.2,this.brightness=f(50,70),this.tragetRadius=1}function M(t,i,s){for(this.x=t,this.y=i,this.type=s,this.coordinates=[],this.coordinateCount=6;this.coordinateCount--;)this.coordinates.push([this.x,this.y]);switch(s){case 1:(h=f(1,5))<2?(this.angle=f(0,2*Math.PI),this.speed=f(1,15),this.friction=.95,this.gravity=4,this.hue=f(r-50,r+50),this.brightness=f(50,80),this.alpha=1,this.decay=f(.01,.02)):h<3?(this.angle=f(0,2*Math.PI),this.speed=f(1,5),this.friction=.95,this.gravity=3,this.hue=f(r-50,r),this.brightness=f(50,80),this.alpha=1,this.decay=f(.015,.03)):h<4?(this.angle=f(0,2*Math.PI),this.speed=f(1,8),this.friction=.95,this.gravity=3,this.hue=f(r,r+50),this.brightness=f(50,80),this.alpha=1,this.decay=f(.015,.03)):(this.angle=f(0,2*Math.PI),this.speed=f(1,15),this.friction=.95,this.gravity=3,this.hue=f(r-50,r+50),this.brightness=f(10,20),this.alpha=1,this.decay=f(.015,.3));break;case 2:(h=f(1,5))<2?(this.angle=f(0,2*Math.PI),this.speed=f(1,10),this.friction=.95,this.gravity=4,this.hue=100,this.brightness=f(50,80),this.alpha=1,this.decay=f(.01,.02)):h<3?(this.angle=f(0,2*Math.PI),this.speed=f(1,21),this.friction=.95,this.gravity=3,this.hue=100,this.brightness=f(50,80),this.alpha=1,this.decay=f(.015,.03)):h<4?(this.angle=f(0,2*Math.PI),this.speed=f(1,3),this.friction=.95,this.gravity=3,this.hue=100,this.brightness=f(50,80),this.alpha=1,this.decay=f(.015,.03)):(this.angle=f(0,2*Math.PI),this.speed=f(1,5),this.friction=.95,this.gravity=3,this.hue=100,this.brightness=f(10,20),this.alpha=1,this.decay=f(.015,.3));break;case 3:(h=f(1,5))<2?(this.angle=f(0,2*Math.PI),this.speed=f(10,15),this.friction=.95,this.gravity=4,this.hue=60,this.brightness=f(10,20),this.alpha=1,this.decay=f(.01,.02)):h<3?(this.angle=f(0,2*Math.PI),this.speed=f(11,15),this.friction=.95,this.gravity=3,this.hue=10,this.brightness=f(10,20),this.alpha=1,this.decay=f(.015,.03)):h<4?(this.angle=f(0,2*Math.PI),this.speed=f(11,18),this.friction=.95,this.gravity=3,this.hue=90,this.brightness=f(10,20),this.alpha=1,this.decay=f(.015,.03)):(this.angle=f(0,2*Math.PI),this.speed=f(11,15),this.friction=.95,this.gravity=3,this.hue=120,this.brightness=f(10,20),this.alpha=1,this.decay=f(.015,.3));break;case 4:var h;(h=f(1,5))<2?(this.angle=f(0,2*Math.PI),this.speed=f(1,10),this.friction=.95,this.gravity=4,this.hue=300,this.brightness=f(50,80),this.alpha=1,this.decay=f(.01,.02)):h<3?(this.angle=f(0,2*Math.PI),this.speed=f(1,21),this.friction=.95,this.gravity=3,this.hue=300,this.brightness=f(50,80),this.alpha=1,this.decay=f(.015,.03)):h<4?(this.angle=f(0,2*Math.PI),this.speed=f(1,3),this.friction=.95,this.gravity=3,this.hue=300,this.brightness=f(50,80),this.alpha=1,this.decay=f(.015,.03)):(this.angle=f(0,2*Math.PI),this.speed=f(1,5),this.friction=.95,this.gravity=3,this.hue=100,this.brightness=f(10,20),this.alpha=1,this.decay=f(.015,.3))}}b.prototype.update=function(t){this.targetRadius<8?this.targetRadius+=.3:this.targetRadius=1,this.speed*=this.acceleration;var i=Math.cos(this.angle)*this.speed,s=Math.sin(this.angle)*this.speed;this.distanceTraveled=v(this.sx,this.sy,this.x+i,this.y+s),this.distanceTraveled>=this.distanceToTarget?(this.coordinates.pop(),this.coordinates.unshift([this.tx,this.ty]),function(t,i){var s=300,h=Math.floor(f(1,5));for(;s--;)o.push(new M(t,i,h))}(this.x,this.y),y.play(),this.draw(),n.splice(t,1)):(this.x+=i,this.y+=s),this.coordinates.pop(),this.coordinates.unshift([this.x,this.y])},b.prototype.draw=function(){h.beginPath(),h.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]),h.lineTo(this.x,this.y),h.strokeStyle="hsl("+r+", 100%, "+this.brightness+"%)",h.stroke()},M.prototype.update=function(t){this.speed*=this.friction,this.x+=Math.cos(this.angle)*this.speed,this.y+=Math.sin(this.angle)*this.speed+this.gravity,this.alpha-=this.decay,4==this.type&&this.alpha<=.5&&(this.brightness+=50,this.hue+=200,this.brightness>=200&&(this.brightness=0)),this.alpha<=this.decay&&o.splice(t,1),this.coordinates.pop(),this.coordinates.unshift([this.x,this.y])},M.prototype.draw=function(){h.beginPath(),h.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]),h.lineTo(this.x,this.y),h.strokeStyle="hsla("+this.hue+", 100%, "+this.brightness+"%, "+this.alpha+")",h.stroke()},s.addEventListener("mousemove",function(h){t=h.pageX-s.offsetLeft,i=h.pageY-s.offsetTop}),s.addEventListener("mousedown",function(t){t.preventDefault(),u=!0}),s.addEventListener("mouseup",function(t){t.preventDefault(),u=!1}),setInterval(function(){r+=.5,h.globalCompositeOperation="destination-out",h.fillStyle="rgba(0, 0, 0, 0.3)",h.fillRect(0,0,e,a),h.globalCompositeOperation="lighter";for(var s=n.length;s--;)n[s].draw(),n[s].update(s);for(s=o.length;s--;)o[s].draw(),o[s].update(s);if(l>=p+g){if(!u){var y=Math.pow(Math.floor(f(-Math.pow(e/2,1/3),Math.pow(e/2,1/3))),3);y+=e/2,n.push(new b(e/2,a,y,f(0,a/2))),l=0,g=Math.pow(f(2,4),2)}}else l++;c>=d?u?(n.push(new b(e/2,a,t,i)),c=0):c=d:c++},25)};
//]]>
</script>
Comments
Post a Comment