Kod ile aşkı çizmek

not: HTML5 öğesi içerdiğinden destekleyen tarayıcıda bakmanızı tavsiye ediyorum.





script:

<script language="JavaScript">
var color = Array();

var ii = 1;
var renderInterval;

var canvas = document.getElementById("cnvs");
var context = canvas.getContext("2d");
context.fillStyle = "#222222";
context.fillRect(0,0,640,480);

function drawLove(){
 shiftColor();
 var r = color[0].toString(16);
 r = r.length < 2 ? "0" + r : r;
 var g = color[1].toString(16);
 g = g.length < 2 ? "0" + g : g;
 var b = color[2].toString(16);
 b = b.length < 2 ? "0" + b : b;
 for(var i=0; i<360; i++){
  var x = (16*Math.pow(Math.sin(i),3));
  var y = -((13*Math.cos(i))-(5*Math.cos(2*i))-(2*Math.cos(3*i))-(Math.cos(4*i)));
  context.fillStyle = "#" + r + g + b;
  context.fillRect(320+x*ii,200+y*ii,1,1);
 }
 ii+=0.05;
 if(ii>40){
  clearInterval(renderInterval);
 }
}

function startIt(){
 if(renderInterval){
  clearInterval(renderInterval);
 }
 ii = 1;
 color[0] = 0;
 color[1] = 0;
 color[2] = 0;
 context.fillStyle = "#222222";
 context.fillRect(0,0,640,480);
 renderInterval = setInterval(drawLove, 5);
}

function shiftColor(){
 color[0]+=10;
 if(color[0]>255){
  color[0] = 0;
  color[1]+=10;
 }
 if(color[1]>255){
  color[1] = 0;
  color[2]+=10;
 }
 if(color[2]>255){
  color[2] = 0;
 }
}
</script>