babu_babu_babooのごみ箱

2011-11-15

ローマ数字に変換？５進数？

00:34

return num.toString (5).split ('').reverce (). map (xxx,['I','V','X','L','M','C']).reverse ().join ('');

しようとも、失敗する。


なんだか、このコードは納得していない。

明日も早いのに、こうしてる場合じゃないだろ＞俺

この間の司会もカミまくり！はずかしい。

かぼちゃも食べたし、足がつらないことを祈ろう。zzz

var toRoman =
  (function () {
     var unit =
       [ [],
         ['', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'],
         ['', 'X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'],
         ['', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'],
         ['', 'M', 'MM', 'MMM' ] ];

     var toQuinary =
       (function (unit) {
          return function (r, c, i, a) {
            return unit[a.length - i][c] + r;
          };
        })(unit);
     
     return function (num, i) {
       if (isNaN (num + ''))
         throw new Error ('Not number');
       
       if (num < 1 || 3999 < num)
         throw new Error ('Number is outside the scope.');
       
       return num.toString ().split ('').reduceRight (toQuinary, '');
     };
  })();

alert ([11,12,14,18,24,43,99,495,1888,3999].map (toRoman).join("\n"));
<

html5で複雑な円グラフを描画
http://oshiete.goo.ne.jp/qa/7134565.html

どこが複雑なのかよくわからないが、書いてみたら Fujillin さんとかぶった。

添え字とか、角度の計算を自動にしただけ＋＋。


<!DOCTYPE html>
<html lang="ja">
<title>Test</title>
<meta charset="utf-8">

<body>
<canvas id="HOGE" width="800" height="400">
  canvas による描画
</canvas>

<script>

var dt = [
  { value: 512,  radius: 90, color: '#080', caption: 'A' },
  { value: 6534, radius: 30, color: '#f00', caption: 'B' },
  { value: 3056, radius: 20, color: '#008', caption: 'C' }
];

var canvas = document.getElementById ('HOGE');

var op = {
  ctrx: canvas.getContext ('2d'),
  x: canvas.offsetWidth / 2 |0,
  y: canvas.offsetHeight / 2 |0,
  r: 180
};

var total = dt.reduce (function (rst, obj) { return rst + obj.value; }, 0);

var drawArc = function  () {
  var square = -90;
  var sin = Math.sin;
  var cos = Math.cos;
  var deg = Math.PI / 180;
  
  return function (obj) {
    var ctrx = this.ctrx;
    var square2 = square + (360 / 100) * obj.rate * 100;

    ctrx.fillStyle = obj.color;
    ctrx.strokeStyle = 'black';
    ctrx.beginPath ();
    ctrx.moveTo (this.x, this.y);
    ctrx.arc (this.x, this.y, obj.radius * this.r / 100 |0, square * deg, square2 * deg, false);
    ctrx.lineTo (this.x, this.y);
    ctrx.closePath ();
    ctrx.fill ();
    ctrx.stroke ();
    
    square = square2;
  };
} ();

var drawCaption = function () {
  var offsetX = 10;
  var offsetY = 8;
  var color = 'white';
  var font = "18px 'ＭＳ Ｐゴシック'";
  
  return function (obj) {
    var y = this.y - this.r * obj.radius / 100;
    this.ctrx.fillStyle = color;
    this.ctrx.font = font;
    this.ctrx.fillText (obj.caption, this.x + offsetX, y + offsetY);
  };
} ();

op.ctrx.arc (op.x, op.y, op.r, 0, 360, false);
op.ctrx.fillStyle = 'silver';
op.ctrx.fill ();

dt.forEach (function (obj) { obj.rate = obj.value / this; }, total);
dt.forEach (drawArc, op);
dt.forEach (drawCaption, op);

</script>

f:id:babu_babu_baboo:20111116005514g:image

コメントを書く

FujillinFujillin 2011/11/16 22:20 こんばんは。

＞書いてみたら Fujillin さんとかぶった
こちらのほうが遅かったみたい。
なんせ、ＨＴＭＬ5とcanvasをいじったことがないので、いろいろ調べていて少々時間がかかった。
（できたものはかなり適当）

でも、追加でアニメーションとか言われても、全部消して描くんならほぼ同じことだし。
各パーツを別々のcannvasに描いておいて重ねて表示して、それぞれを動かす方法とか考えたけれど、いずれにしろマウスの位置から図形を特定するのがめんどくさそうなので、ちょいと挫折した。
やっぱ、ＳＶＧかなぁ…　（そこまでたどり着くのはいつの日やら）

ところで、かぼちゃは足のつりにきくのでしょうか？
（それなら、食べるぞ）

babu_babu_baboobabu_babu_baboo 2011/11/17 08:27 おはようございます。

寒くなりましたね〜。

> ところで、かぼちゃは足のつりにきくのでしょうか？
http://www.karadanayami.com/turu/
（奥さんが言っていたのですが、探したら書いてありました。）
昨日はつる気配なし！


秋の夜長にこそ、がっつりパソコンできると思いきや、仕事×２！
疲労がたまっています。

FujillinFujillin 2011/11/17 22:31 またきました。


＞昨日はつる気配なし！
効果ありみたいですね…
サイトを見てみると、必ずしもかぼちゃ特有の成分が効くってわけでもなさそう。
梅干のほうが好みなので、梅干波になろうかな。


canvasのついでにSVGもお勉強してみようかと思ったら、ドキュメントの膨大さに負けて、とりあえず逃げに入ってしまった。
暇を見てチビチビと読んでみるかなぁ…。（そもそもの概念がよくわかってないし）
（おまけに、未だに仕様書の読み方すらもよくわかっていないのだが（自爆））

ampampampamp 2011/11/18 12:47 タイムリーにも強烈なこむら返りを起こしつつ。

detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1175676961
japan.internet.com/developer/20090220/26.html

SVG ついでに SMIL やりませんか！

FujillinFujillin 2011/11/18 13:54 わおっ！

小高い山の麓にたって何気なく山を見上げてみたら、いつの間にかその向こう側にで〜っかい山がぁ…

babu_babu_baboobabu_babu_baboo 2011/11/18 21:27 こんばんは。

疲労だけが重なる毎日です。

仕事の合間に、円グラフのフォーカス対象をどうやってアニメーションするか妄想しています。締め切っちゃうだろうなぁ〜。

これも（www.w3.org/TR/xslt20/#date-time-examples）悩んでますが、晩飯を食べた時点で、睡魔が…。



山は登ってみてこそ、見渡す景色に感動するもの。さぁ〜お行きなさい！^^;

ampampampamp 2011/11/18 23:25 Fujillin さん、

ぜひ「SVG/SMIL の第一歩」みたいな記事を書いて下さいませ。CSS Animation/Transition Lv3 のプロパティと値は、SVG に由来するものが多いですから。

どうせ避けられない道、少しずつ登っていけば、いつの間にかヒマラヤの頂上に着いてますよ！ 私は笑顔でお見送りします！

トラックバック - http://d.hatena.ne.jp/babu_babu_baboo/20111115/1321371254
リンク元
最新タイトル
カテゴリー
プロフィール

babu_babu_baboo

岩手県の最北の町、洋野町に住んでいる〜！