Записи

 <p><table width="800" height="500" border="1"
 align="center" class="colorborder">
  <tr>
  <td width="800" height="500" style="cursor:pointer;
 background-image:url(snegoviki.jpg)"><canvas id="v12myCanvas1"
 width="800" height="500"></canvas></td>
  </tr>
  <tr>
  <td width="800" align="center"><input readonly="readonly"
 value="start" style="width: 90px; height: 20px; cursor:pointer;
 border: 1px solid blue;" onclick="MStart()">
  </td>
  </tr>
 </table> 
 <script type="text/javascript">
 var imgsrc = "ImageSnow.png";
 var height = 500;
 var width = 800;
 var col = Math.round(height/2);    
 var tempCol = Math.round(height/2);</p>

 <p>var amp = new Array();
 var x_pos = new Array();
 var y_pos = new Array();
 var stx = new Array();
 var sty = new Array();
 var deltax = new Array();
 var obj = new Array();</p>

 <p>for (i=0; i<col; ++i) {
  amp[i] = Math.random()*19;
  x_pos[i] = Math.random()*(width-amp[i]-29);
  y_pos[i] = Math.random()*height;
  stx[i] = 0.03 + Math.random()*0.25;
  sty[i] = 2 + Math.random();
  deltax[i] = 0;</p>

 <p> document.write("<img id=\"sn"+ i +"\" style=\"position: absolute;
 " +
  "z-index: 50; top: -50px; left: -50px;\" src='" + imgsrc + "'>");</p>

 <p> obj[i] = document.getElementById("sn" + i);
 }</p>

 <p>function getOffset(elem) {
  if (elem.getBoundingClientRect) {
  return getOffsetRect(elem)
  } else {
  return getOffsetSum(elem)
  }
 }
  
 function getOffsetSum(elem) {
  var top=0, left=0
  while(elem) {
  top = top + parseInt(elem.offsetTop)
  left = left + parseInt(elem.offsetLeft)
  elem = elem.offsetParent
  }
  
  return {top: top, left: left}
 }
  
 function getOffsetRect(elem) {
  var box = elem.getBoundingClientRect()
  
  var body = document.body
  var docElem = document.documentElement
  
  var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
  var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
  
  var clientTop = docElem.clientTop || body.clientTop || 0
  var clientLeft = docElem.clientLeft || body.clientLeft || 0
  
  var top = box.top + scrollTop - clientTop
  var left = box.left + scrollLeft - clientLeft
  
  return { top: Math.round(top), left: Math.round(left) }
 }</p>

 <p>function flake() {</p>

 <p> for (i=0; i<tempCol; ++i) {
     y_pos[i] += sty[i];
     if (y_pos[i]>height-49) {
         y_pos[i] = height-49;
     }
     deltax[i] += stx[i];
     var elm = document.getElementById('v12myCanvas1');
     var coords = getOffset(elm);
     obj[i].style.top = y_pos[i] + coords.top + "px";
     obj[i].style.left = x_pos[i] + amp[i]*Math.sin(deltax[i])+ coords.left + 10 +"px";
  }
 setTimeout("flake()", 60);
 }
 flake();</p>

 <p>function MStart() {
 tempCol = Math.round(height/2);
  for (i=0; i<tempCol; ++i) {
         x_pos[i] = Math.random()*(width-amp[i]-29);
         y_pos[i] = Math.random()*height;
     }
 }
 </script></p>