log4ZIGOROu : XULでCanvasエディターを作ってみた

手軽にCanvasで遊べるツールとしてはオンラインにCanvas Shellと言う物があります。

車輪の再発明感が多々ありますけど、Canvasで遊べるエディターを作ってみました。

タイトル通り激しくFirefox専用です。

ダウンロード

Canvas Editor

使い方

デフォルトで、canvas, ctxがいきなり使えるようになってます。

サンプル

貼付けてすぐに試せるサンプルです。

clip()の例

via Canvas Tutorial : Compositing


function draw() {
  ctx.fillRect(0,0,150,150);
  ctx.translate(75,75);

  // Create a circular clipping path       
  ctx.beginPath();
  ctx.arc(0,0,60,0,Math.PI*2,true);
  ctx.clip();

  // draw background
  var lingrad = ctx.createLinearGradient(0,-75,0,75);
  lingrad.addColorStop(0, '#232256');
  lingrad.addColorStop(1, '#143778');
 
  ctx.fillStyle = lingrad;
  ctx.fillRect(-75,-75,150,150);

  // draw stars
  for (j=1;j<50;j++){
    ctx.save();
    ctx.fillStyle = '#fff';
    ctx.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150));
    drawStar(ctx,Math.floor(Math.random()*4)+2);
    ctx.restore();
  }
 
}
function drawStar(ctx,r){
  ctx.save();
  ctx.beginPath()
  ctx.moveTo(r,0);
  for (i=0;i<9;i++){
    ctx.rotate(Math.PI/5);
    if(i%2 == 0) {
      ctx.lineTo((r/0.525731)*0.200811,0);
    } else {
      ctx.lineTo(r,0);
    }
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

draw();

同心円状にグラデーション


ctx.translate(75,75);
 
ctx.beginPath();
ctx.arc(0,0,60,0,Math.PI*2,true);
ctx.clip();

var lingrad = ctx.createRadialGradient(0, 0, 0, 0, 0, 75);
lingrad.addColorStop(0, '#838286');
lingrad.addColorStop(1, '#143778');

ctx.fillStyle = lingrad;
ctx.fillRect(-75,-75,150,150);

合わせて読みたい！(追記)

なんだかAmazonのリコメンドっぽぃですが、

辺りを読むとよりCanvasを楽しめるかもしれません。

drawWindow()が使えないから、extensionにするかもです。

comment

trackback

trackback url
trackback count: 0