Advertisement
999ms

Untitled

Dec 12th, 2018
182
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.42 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>COLORS</title>
  5. <style>
  6.     canvas {background: black }
  7. </style>
  8.  
  9. <script>
  10.   var canvas;
  11.   var ctx;
  12.   const H = 1000;
  13.   const W = 1200;
  14.   var goPath = false;
  15.   var lastAct = 0;
  16.   var list = [];
  17.   var need =  true;
  18.   function init() {
  19.     canvas = document.getElementById('myCanvas');
  20.     ctx = canvas.getContext('2d');
  21.   }
  22.   function printRoungInCenterWithR(x,y,r, clr){
  23.     ctx = canvas.getContext('2d');
  24.     ctx.fillStyle = clr;
  25.     ctx.beginPath();
  26.     var leftAngle = 0;
  27.     var rightAngle = Math.PI*2;
  28.     ctx.arc(x,y,r,leftAngle,rightAngle,false);
  29.     ctx.fill();
  30.   }
  31.  
  32.   var timerId = setInterval(function() {printRound();}, 5);
  33.  
  34.   function printRound(){
  35.     list.sort((a,b)=>-a[4]+b[4]);
  36.     var curTime = getTimeMs();
  37.     if(list.length>0){
  38.       var v = list.pop();
  39.       if(v[4]<curTime){
  40.        printRoungInCenterWithR(v[0],v[1],v[2],v[3]);
  41.      }
  42.      else{
  43.        list.push(v);
  44.      }
  45.    }
  46.  }
  47.  
  48.  onmousemove = function (event) {
  49.    if(getTimeMs()-lastAct<10||!need) return;
  50.    lastAct =getTimeMs();
  51.    var cx = event.pageX-8.5;
  52.    var cy = event.pageY-10;
  53.    var size = 20*Math.random();
  54.    list.push([cx,cy,size, getRandomColor(), lastAct]);
  55.    list.push([cx,cy,size+1, "#000000", lastAct+500]);
  56.  }
  57.  onmousedown = function(event){
  58.    var cx = event.pageX-8.5;
  59.    var cy = event.pageY-10;
  60.    var curR = 5;
  61.    var curTime = getTimeMs();
  62.    var clr = getRandomColor();
  63.    for(var i=0;i<150;i++)
  64.    {
  65.      var len = 3*i;
  66.      list.push([cx+len*Math.cos(i*10),cy+len*Math.sin(i*10),curR, clr, curTime + 5*i]);
  67.      list.push([cx+len*Math.cos(i*10),cy+len*Math.sin(i*10),(curR+1), '#000000', curTime +5*i+1000]);
  68.    }
  69.  }
  70.  
  71.  function getTimeMs() {
  72.    var date = new Date();
  73.    return date.getMilliseconds()+date.getSeconds()*1000+date.getMinutes()*1000*60+date.getHours()*60*60*1000;
  74.  }
  75.  
  76.  onkeydown = function(e) {
  77.    var key = e.keyCode;
  78.    if(key==32)need = !need;
  79.  };
  80.  
  81.  function drawImg(img, x,y){
  82.    img.onload =
  83.    function(){
  84.      ctx.drawImage(img, x, y);
  85.    }
  86.  }
  87.  
  88.  function getRandomColor() {
  89.    var letters = '0123456789ABCDEF';
  90.    var color = '#';
  91.    for (var i = 0; i < 6; i++)
  92.    color += letters[Math.floor(Math.random() * 16)];
  93.    return color;
  94.  }
  95.  
  96. </script>
  97. </head>
  98. <body onload = "init()">
  99.   <canvas id="myCanvas" width="1200" height="1000">
  100.   </canvas>
  101. </body>
  102. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement