Subscribe to RSS Feed ログイン

オーガニック・ウェルス

Saturday
2018年4月21日

canvasタグの座標変換

下記のようなグラフを出力するのに座標変換を使って描画してみました。

function paint(){

    ctx.strokeStyle = “#333333″;

    ctx.lineWidth = 1;

    // X

    ctx.beginPath();

    ctx.moveTo(0, h / 2);

    ctx.lineTo(w, h / 2);

    ctx.stroke();

    // Y

    ctx.beginPath();

    ctx.moveTo(w / 2, 0);

    ctx.lineTo(w / 2, h);

    ctx.stroke();

    // CANVASの中心を(0,0)に指定

    ctx.setTransform(1, 0, 0, 1, w / 2, h / 2);

    ctx.textAlign = “right”;

    // 文字の傾き角度

    var deg = -80;

    var seata = deg * Math.PI / 180;

    ctx.rotate(seata);

    for(var i = -10;i <= 10;i += 1) {

        var y = 10;

        var x = i * 35;

        var d = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

        var tan = Math.atan2(y, x);

        var x2 = d * Math.cos(tan – seata);

        var y2 = d * Math.sin(tan – seata);

        ctx.fillText(i.toFixed(1), x2, y2);

    }

    ctx.rotate(-seata);

    // Y座標を反転し、CANVASの中心を(0,0)に指定

    ctx.setTransform(1, 0, 0, -1, w / 2, h / 2);

    // グラフ描画

    ctx.beginPath();

    ctx.strokeStyle = “#ff6633″;

    for(var i = -10;i < 10;i += 0.01) {

        var y = i * i * 2.5;

        var x = i * 35;

        ctx.lineTo(x, y);

    }

    ctx.stroke();

}

グラフを出力するならば-Xから+Xの間の値を取れると楽なのでsetTransformの第5,6引数にて座標をずらします。そしてcanvasはもともと下方向に+Yが向いているので第4引数に-1を渡すことによって上方向を+Yにしています。setTransformを使用することによってグラフの座標処理を簡単にします。

またX軸の目盛りは文字を80度傾けています。傾けるといってもrotateでは描画すべてを傾けて描画するため、傾いたあとの補正する値を計算します。

サンプル

コメント(0)続きを読む

半導体の売り上げシェアをグラフにしてみた

Wikipediaにあります半導体メーカの売り上げを年毎にプロットしたグラフを作ってみました。

半導体メーカー売上高ランキング

まず1987年から1996年までのトップ10の売上高をグラフにしました。

1987年は上位をNEC、東芝、日立と日本企業が占めていました。1992年にIntelに首位を奪われてからは一度も奪還できていないばかりかさらに差をつけられてしまいます。

次は1994年から2002年の売り上げですが、完全にIntelに独走を許しており2位以下の企業は売り上げを伸ばすことができていませんでした。Intelの地位が確固たるものとなりました。

最後は2000年から2010年の売り上げです。Intelは変わらず首位をキープしていますが、背後にはサムスン電子の足跡が忍び寄ります。3位以下の企業は混戦状態で順位の変動が激しい状態です。

今までIntelはPCの売り上げによって支えられてきました。これからはスマートフォンの時代になりスマートフォン用のCPUを販売していないIntelにとっては不利なように見えますが、私にはそれは一要因でしかなく、どのようなソフトウェアがどのデバイスをサポートするかで変わると思っています。

今後も気になる分野です。

参考:

日本「半導体」の凋落とともに歩んだ技術者人生 世界シェア50%を誇った日本の半導体はどこへ

コメント(0)続きを読む

RubyでHTMLを解釈するライブラリ[Hpricot]を使う

環境CentOS

まずバージョンの確認

#cat /etc/redhat-release
CentOS release 5.5 (Final)
# ruby -v

ruby 1.8.7 (2011-06-30 patchlevel 352) [x86_64-linux] ←Rubyが1.8.7でなければアップデートする

#gem -v

1.3.7 ←rubygemsが1.3.7では無ければアップデートする

# yum remove ruby-libs
# wget ftp://ftp.ruby-lang.org/pub/ruby/1.8/ruby-1.8.7-p352.tar.gz
# tar xvf ruby-1.8.7-p352.tar.gz
# cd ruby-1.8.7-p352
# ./configure –prefix=/usr
# make
# make install
# wget http://rubyforge.org/frs/download.php/75308/rubygems-update-1.8.10.gem
# gem install rubygems-update-1.8.10.gem –local
# git clone git://github.com/thbar/hpricot.git
# cd hpricot
# ruby setup.rb

インストールが完了したのでこちらのサイトのようにHpricotを使えます。

ついでに、

Rubyをソースからインストールすると、Rails起動時にOpensslが無いと言われるのでOpenSSLをインストールします。

OpenSSLはRubyのソースフォルダにあります。

# cd ruby-1.8.7-p352/ext/openssl/
# ruby extconf.rb
# make
# make install

あと、SQLite3もインストール

# yum install sqlite-devel
# gem install sqlite3-ruby -v 1.2.5

コメント(0)続きを読む