あの楽器

Firefox4 Only

by Tenderfeel

HTML

<canvas id="miku"></canvas>

CSS

body {
  margin:0;
  padding:0;
  background:#000;
}

JavaScript

function Rect() {
    this.initialize.apply(this, arguments);
}

Rect.prototype = {
  initialize: function(x, y) {
    this.x = x;
    this.y = y;
    this.key = this.method[Math.floor(Math.random()*this.method.length)];
    switch(this.key){
      case "triangle": this.a = (Math.random()*180); break;
      case "stroke": this.a = 2 * Math.PI * (Math.random()*360/360); break;
      default: return null;
    }
  },
  
  h : 0, //height
  a : 0, //angle
  t : 1, //transparency
  
  method:['stroke','stroke','triangle','square','circle'],
  
  rotate:function(ctx){
    ctx.translate(this.x, this.y);
    ctx.rotate(this.a * Math.PI / 180);
    ctx.translate(-this.x, -this.y);
  },
  
  triangle:function(ctx){
    var z = this.h / Math.sin(30 * (Math.PI/180));
    ctx.save();
    this.rotate(ctx);
    ctx.strokeStyle = 'rgba(0,255,204,'+this.t.toFixed(1)+')';
    ctx.beginPath();
    ctx.moveTo(this.x-z,this.y+this.h);//左下点
    ctx.lineTo(this.x,this.y-this.h*2);//上点
    ctx.lineTo(this.x+z,this.y+this.h);//右下点
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
  },
  
  circle:function(ctx){
    ctx.save();
    ctx.strokeStyle = 'rgba(0,255,204,'+this.t.toFixed(1)+')';
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.h,0,Math.PI*2,true);
    ctx.stroke();
    ctx.restore();
  },
  
  square:function(ctx){
    ctx.save();
    ctx.strokeStyle = 'rgba(0,255,204,'+this.t.toFixed(1)+')';
    this.rotate(ctx);
    ctx.strokeRect(this.x-this.h,this.y-this.h,this.h*2,this.h*2);
    ctx.restore();
  },
  
  stroke:function(ctx){
    ctx.save();
    c = ctx.canvas.width * Math.cos(this.a);
    s = ctx.canvas.width * Math.sin(this.a);
    ctx.strokeStyle = 'rgba(0,255,204,'+this.t.toFixed(1)+')';
    ctx.beginPath();
    ctx.moveTo(this.x+c, this.y-s);
    ctx.lineTo(this.x-c, this.y+s);
    ctx.stroke();
    ctx.restore();
  },
  
  update: function(){
    this.h += 15;
    if(this.key=="square") this.a += 5;
    if(this.t>0) this.t -= 0.03;
    else this.t=0;
   ...