【javascript】記事本文に書いたサンプルコードをそのまま実行する

もちろんjavascriptでのお話。
アメブロカスタムさんの記事にも通じるところがあるんですが少し違います。

例えば前回のcanvasタグの記事の中で書いたように、サンプルコードを書きその下に実行結果を表示するとします。
その場合、記事に書く用に本文にコードを書いて、実際に実行するために同じコードをもう一回書くのは馬鹿馬鹿しいので、その本文に掲載したコードをそのまま実行してしまおうというのが主旨になります。
前回の記事はその方法で作成しています。

その方法は、フリープラグインに

<script type="text/javascript">
$(function(){
  $(".jscode").each(function(){
    eval($(this).text());
  });
});
</script>

こんな感じで記述し、本文にコードを書くときは

<div class="jscode">
//ここにjavascriptコードを書く
</div>

と書くだけです。
ただアメブロはいろいろ勝手に挿入されちゃうので、正しく動作させるのにちょっとしたコツがあります。
●演算子と変数は必ず間に半角スペースを入れる。
これはもともとこの記述法の方がキレイなので良いかと思います。
●必ず行の終わりを示す「;」を入れる。
これも見やすいコードを書く習慣になってよいかも。

ではこの方法で実際に次回の記事のために書いたコードを載せてみます。
ソースを見れば解りやすいかも？

(function($){
  $(function() {
    var canvas = $("#canvas").get(0);
    if(!canvas || !canvas.getContext){
      return false;
    }
    var ctx = canvas.getContext("2d");
    var pi360 = Math.PI*2;
    var circles=[];
    var canvaswidth = 400;
    var canvasheight = 300;
    var FRAMERATE = 60;
    var numOfCircles = 600;
    canvas.width = canvaswidth;
    canvas.height = canvasheight;
 
    var Circle = function(){
      this.initialize.apply(this,arguments);
    };
 
    Circle.prototype={
      fill:"#000000",
      stroke:null,
      initialize:function(x,y,r,fill,stroke) {
        this.x = x||0;
        this.y = y||0;
        this.r = r||5;
        this.speedx = ~~(Math.random()*8)+2;
        this.speedy = (~~(Math.random()*5)/10)+0.5;
        this.pi = -0.5*Math.PI;
        this.picache = (Math.PI/this.speedx)/FRAMERATE;
        this.disx = ~~(Math.random()*250)-150;
        this.beginingx = this.x + this.disx;
        this.fill = fill||"#000000";
        this.stroke = stroke||fill;
      },
      render:function(context){
        context.beginPath();
        context.fillStyle = this.fill;
        context.strokeStyle = this.stroke;
        context.arc(this.x, this.y, this.r, 0, pi360,true);
        context.closePath();
        context.fill();
        if(this.fill === this.stroke){
        }else{
          ct.stroke();
        }
      },
      moveinit:function(){
        this.pi = -0.5*Math.PI;
        this.speedx = ~~(Math.random()*8)+5;
        this.disx = ~~(Math.random()*250)-150;
        this.beginingx = this.x + this.disx;
        this.picache = (Math.PI/this.speedx)/FRAMERATE;
      }
    };

    for(var i = 0;i < numOfCircles;i++){
      circles.push(new Circle(
        ~~(Math.random()*canvaswidth),
        ~~(Math.random()*canvasheight),
        ~~(Math.random()*15),
        "rgba( "+
        ~~(Math.random()*255)+
        ","+
        ~~(Math.random()*255)+
        ","+
        ~~(Math.random()*255)+
        ","+
        (((~~(Math.random()*80))/100)+0.2)+
        ")"
      ));
      circles[i].render(ctx);
    }

    var step = function(){
      var sin = Math.sin;
      var random = Math.random;
      var len = circles.length;
      var PI = Math.PI;
      var cw = canvaswidth;
      var ch = canvasheight;
      var circleArray = circles;
      var context = ctx;
      context.clearRect(0, 0, cw, ch);
      for(var i = 0;i < len;i++){
        var ccl = circleArray[i];
        if(ccl.y + ccl.r < 0){
          ccl.y = ch + ccl.r;
          ccl.x=~~(random()*cw);
          ccl.moveinit();
        }
        ccl.y = ccl.y - ccl.speedy;
        ccl.pi += ccl.picache;
        ccl.x =  ccl.beginingx + (ccl.disx * sin(ccl.pi));
        if(ccl.pi > PI * 1.5){
          ccl.moveinit();
        }
        if(ccl.x + ccl.r > 0 && ccl.x - ccl.r < cw){
          ccl.render(context);
        }
      }
    };

    setInterval(step,(1000 / FRAMERATE));
  });
}(jQuery));

↓結果はこちら

ランダムに色と透過つけた上にヘタクソが書いたパーティクル600個がヌルヌル。
思ったより全然軽いぜcanvas！！