canvasでグラデーションしてみる

勉強 プログラミング javascript

とりあえず現時点でできてるもの。
Core2Duo2.4GHz メモリ2GBのMacBook上のFirefox3で6秒弱

<html>
<body>
<canvas id="color" width="350" height="350"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('color');
var ctx = canvas.getContext('2d');

var canvas_w = canvas.width;
var canvas_h = canvas.height;
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,canvas_w,canvas_h);

var floor = Math.floor;
var pow = Math.pow;
var cos = Math.cos;
var atan2 = Math.atan2;
var black = [0,0,0];
var pi =- Math.PI;
var pi2 = Math.PI * 2;
var pi2_3 = Math.PI * 2 / 3;
var pi_2 = Math.PI/2;
var pi_3 = Math.PI/3

var mid = [canvas_w/2,canvas_h/2]

var w,h;
w = h = 1;
var r = pow((canvas_w-9)/2,2);

var radian;
for(var j=0;j<canvas_h;j+=h){
  for(var i=0;i<canvas_w;i+=w){
    var d2 = pow(i-mid[0],2) + pow(j-mid[1],2);
    if(r < d2){continue;}
    radian = (atan2(-j+mid[1],-i+mid[0]) - pi_2);
    radian = (radian < 0) ? pi2 + radian : radian; 
    rgb = [
      cos(radian) + 0.5,
      cos(radian - pi2_3) + 0.5,
      cos(radian + pi2_3) + 0.5
    ];
    for(var t =0;t<3;t++){
      rgb[t] = (rgb[t] < 0) ? 0 : rgb[t];
      rgb[t] = (1 < rgb[t]) ? 1 : rgb[t];
      rgb[t] = 255 *  rgb[t];
      rgb[t] = parseInt(rgb[t]);
    }
    ctx.fillStyle = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
    ctx.fillRect(i,j,w,h);
  }
}


</script>

</body>
</html>

あとで、canvasに実装されてるグラデーション用のメソッドも使ってみるw