素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

canvasを使って円周率を求める(getImageDataメソッド)

canvasに円を描いて面積を求め、rの二乗で割って円周率の近似を求める。
rを大きくすればより近い値が求められるが、より実行に時間がかかる。
500でも十分CPUを食うので注意。

var s = 0,
r = 500;

var canvas = document.createElement('canvas');
canvas.width = canvas.height = r * 2;

var context = canvas.getContext('2d');
context.arc(r, r, r, 0, Math.PI * 2, true);
context.fill();

for (var x = 0; x < r * 2; x++)
  for (var y = 0; y < r * 2; y++)
    context.getImageData(x, y, 1, 1).data.pop() && s++;

console.log(s / (r * r));//3.148276

参考:createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP