HTML5 Canvas Sample (PSet Demo)

PSet Demo

矩形領域にランダムに点を打ちます。

実行結果

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var ctx;
var bmp;
var w,h;
 
function pset(x,y,r,g,b,a)
{
    var st = (x + w * y) * 4;
    var dt = bmp.data;
    dt[st++] = r;
    dt[st++] = g;
    dt[st++] = b;
    dt[st++] = a;
}
 
function draw()
{
     
    pset(Math.floor(Math.random() * 128),Math.floor(Math.random() * 128)
    ,Math.random() * 256,Math.random() * 255,Math.random() * 255,255);
    ctx.putImageData(bmp,0,0);
}
 
$(window).ready(
function () {
  ctx = document.getElementById("ctx").getContext("2d");
  w = $("#ctx").width();
  h = $("#ctx").height();
  bmp = ctx.createImageData(w, h);
  window.setInterval(draw, 10);
  $('#sourcecode').text($('#sc01').text());
  SyntaxHighlighter.all();
}
);