話題のCANVAS使ってみました。
Javascriptとしては昔と特に変わってないですねというのが印象ですが…（まぁWEB標準に正式に取り入れられたことが大事です！）
ProcessingやASで絵を描いたことがある人なら特に抵抗なく受け入れられると思います。

まぁ僕も触ったばっかりでまずは円を描いてみたりとかいうレベルですが。
ちゃんとやれば加工とかもできそうなのでちゃんとやりましょう。

ということでできたのがこれです。
たぶんIEの人は残念な結果です。SafariかFirefoxで。iPhoneでも見れることを確認しました。
せっかくなのでHTML5っぽくしときました

サンプルページ

なんかこういう感じならサイトのトップとかでも使えそうですねーというイメージで
円の位置/大きさ/色/透明度をすべてランダムで生成しているだけです。
100回に一回の確立ですべてをクリア、ついでにマウス追従で気持ち悪い感じで円を生成してみました。

これでコードがこれだけです。これだと汎用性も何もないのでべた書きで汚くてすみませんね！ほんと。

(function(){
//canvas
window.addEventListener("load",function(){
  //first property
  var cvs = document.getElementById("canvasobj");
  if (!cvs.getContext) return false;
  var ctx = cvs.getContext('2d');

  var max_x = cvs.width = window.innerWidth;
  var max_y = cvs.height = window.innerHeight;

  var offset_x = cvs.offsetLeft;
  var offset_y = cvs.offsetTop;

  var point_x = 0;
  var point_y = 0;
  var point_r = 0;
  var point_e = 0;
  var point_a = 0;

  var getRandColor = function(){
    var rgb = (Math.floor(Math.random()*0xffffff)).toString(16);
    for (i=6-rgb.length; i>0; i--) {
      rgb = "0"+rgb;
    }
    return "#"+rgb;
  };

  var createCircle = function(e){
    ctx.beginPath();
    if(e){
      point_x = e.clientX - offset_x;
      point_y = e.clientY - offset_y;
      point_r = Math.floor(((max_y + 1)/10) * Math.random()+15);
    }else {
      point_x = Math.floor((max_x + 1) * Math.random());
      point_y = Math.floor((max_y + 1) * Math.random());
      point_r = Math.floor(((max_y + 1)/4) * Math.random()+20);
      if(Math.floor((100 - 1 + 1) * Math.random() + 1) === 1) {
        ctx.clearRect(0,0,max_x,max_y);
      }
    }
    point_e = Math.PI+(Math.PI*2)/2;
    point_a = ((1.0 - 0.1 + 1) * Math.random() + 0.1);
    ctx.arc(point_x,point_y,point_r,0,point_e,true);
    ctx.fill();
    ctx.fillStyle = getRandColor();
    ctx.globalAlpha = point_a;
    return ctx;
  };

  //random
  setInterval(function(){
    createCircle();
  },60);

  //with mouse
  cvs.addEventListener("mousemove",function(e){
    createCircle(e);
  },false);
  
  //clear
  cvs.addEventListener("click",function(e){
    ctx.clearRect(0,0,max_x,max_y)
  },false);
  
  //resize canvas area
  window.addEventListener("resize",function(){
    cvs.width=window.innerWidth;
    cvs.height=window.innerHeight;
    max_x = window.innerWidth;
    max_y = window.innerHeight;
  },false);
},false);
})();

なんというシンプル！
純粋にCANVAS関連で使っているのは以下の通り
 

  //canvasオブジェクトを呼び出して
  var cvs = document.getElementById("canvasobj");
  //対応外ブラウザを拒否して
  if (!cvs.getContext) return false;
  //2dコンテキストを呼び出し
  var ctx = cvs.getContext('2d');

これだけでお絵かきの準備は完了です。

あとは

    //パスを書き始めますよ宣言
    ctx.beginPath();
    //円を描くメソッド。arc(x, y, 半径, 円の始点, 円の終点, 回転方向)
    ctx.arc(point_x,point_y,point_r,0,0,true);
    //塗りつぶしメソッド
    ctx.fill();
    //塗りつぶし色プロパティ
    ctx.fillStyle = getRandColor();
    //透明度
    ctx.globalAlpha = point_a;

実質円を描いているのはこれだけです。シンプルですね。

もちろん複雑な曲線を描くのであればベジェ曲線を書くので設定する引数が増えますが基本的には考え方は同じくただポイントと設定をオブジェクト毎に埋め込んでやれば描画してくれます。
複雑なアニメーションをしたりすることを考えるとFlashの方が選択肢として上がることが多いとは思いますが、サンプルページのようにHTMLの裏側に置いて背景のように使う。などであればこちらのほうが扱いが楽ですね。（ただのHTMLオブジェクトなので）

参考：
Canvas チュートリアル – MDC

Share on Tumblr

Tweet