Трансформации

  • Revision slug: Обучение_canvas/Трансформации
  • Revision title: Трансформации
  • Revision id: 323981
  • Created:
  • Creator: Jamvi
  • Is current revision? Нет
  • комментировать

Revision Content

 

var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
  sun.src = 'images/sun.png';
  moon.src = 'images/moon.png';
  earth.src = 'images/earth.png';
  setInterval(draw,100);
}
 
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
 
  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0,0,300,300); // clear canvas
 
  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(150,150);
 
  // Earth
  var time = new Date();
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  ctx.translate(105,0);
  ctx.fillRect(0,-12,50,24); // Shadow
  ctx.drawImage(earth,-12,-12);
 
  // Moon
  ctx.save();
  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
  ctx.translate(0,28.5);
  ctx.drawImage(moon,-3.5,-3.5);
  ctx.restore();
 
  ctx.restore();
   
  ctx.beginPath();
  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
  ctx.stroke();
  
  ctx.drawImage(sun,0,0,300,300);
}

Revision Source

<p>&nbsp;</p>
<div>
  var sun = new Image();</div>
<div>
  var moon = new Image();</div>
<div>
  var earth = new Image();</div>
<div>
  function init(){</div>
<div>
  &nbsp; sun.src = 'images/sun.png';</div>
<div>
  &nbsp; moon.src = 'images/moon.png';</div>
<div>
  &nbsp; earth.src = 'images/earth.png';</div>
<div>
  &nbsp; setInterval(draw,100);</div>
<div>
  }</div>
<div>
  &nbsp;</div>
<div>
  function draw() {</div>
<div>
  &nbsp; var ctx = document.getElementById('canvas').getContext('2d');</div>
<div>
  &nbsp;</div>
<div>
  &nbsp; ctx.globalCompositeOperation = 'destination-over';</div>
<div>
  &nbsp; ctx.clearRect(0,0,300,300); // clear canvas</div>
<div>
  &nbsp;</div>
<div>
  &nbsp; ctx.fillStyle = 'rgba(0,0,0,0.4)';</div>
<div>
  &nbsp; ctx.strokeStyle = 'rgba(0,153,255,0.4)';</div>
<div>
  &nbsp; ctx.save();</div>
<div>
  &nbsp; ctx.translate(150,150);</div>
<div>
  &nbsp;</div>
<div>
  &nbsp; // Earth</div>
<div>
  &nbsp; var time = new Date();</div>
<div>
  &nbsp; ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );</div>
<div>
  &nbsp; ctx.translate(105,0);</div>
<div>
  &nbsp; ctx.fillRect(0,-12,50,24); // Shadow</div>
<div>
  &nbsp; ctx.drawImage(earth,-12,-12);</div>
<div>
  &nbsp;</div>
<div>
  &nbsp; // Moon</div>
<div>
  &nbsp; ctx.save();</div>
<div>
  &nbsp; ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );</div>
<div>
  &nbsp; ctx.translate(0,28.5);</div>
<div>
  &nbsp; ctx.drawImage(moon,-3.5,-3.5);</div>
<div>
  &nbsp; ctx.restore();</div>
<div>
  &nbsp;</div>
<div>
  &nbsp; ctx.restore();</div>
<div>
  &nbsp; &nbsp;</div>
<div>
  &nbsp; ctx.beginPath();</div>
<div>
  &nbsp; ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit</div>
<div>
  &nbsp; ctx.stroke();</div>
<div>
  &nbsp;&nbsp;</div>
<div>
  &nbsp; ctx.drawImage(sun,0,0,300,300);</div>
<div>
  }</div>
Revert to this revision