タグ

canvasに関するtamaotのブックマーク (4)

  • 等高線を描く - f8g

    基盤地図情報を使うと画像が公開できないので、普通の画像のRGBを標高値として等高線を描きます。 アルゴリズムが合ってんだか間違ってんだか分からん。(間違ってたのでコード修正しました) 簡単なアルゴリズムでは、画像を三角形に分割してその中で線を引いていきます。 使用 // 点 function Point3D(x, y, z){ if(!x) x = 0; if(!y) y = 0; if(!z) z = 0; this.x = x; this.y = y; this.z = z; } /** * 分割して線を引かせる部分 * @boxInterval 三角形の大きさ * @conInterval 等高線を引く間隔 */ ImageProcessing.prototype.drawContour = function(boxInterval, conInterval){ var ps = [

    等高線を描く - f8g
  • 基盤地図情報をcanvasで - f8g

    最近でもないけど、基盤地図情報が無料でダウンロードできるようになった。 http://fgd.gsi.go.jp/download/ blogで画像を公開するのには申請が必要みたいなので今回は画像なし。 データ GML版の方が軽くてシンプルなのでそっちを使ってやります。(だた、そこで公開されている閲覧ソフトでは処理できないみたいですが) 一番下のほうにある数値標高モデルをダウンロードすると、ZIPファイルにいくつかXMLが入ってますが、今回は適当にやるので、適当にひとつ選びます。 データは大体こんな感じで書かれてます。(というか仕様知らんので詳しくはそっちを) 多分右下の座標 多分左上の座標 , メッシュのセルの数。番号がlowからhighまで、xとyについて書かれてる。 標高値のデータ。タイプ,値[改行] タイプは、その他: 陸地、データなし: たぶん海(値は-9999.) 処理 それっ

    基盤地図情報をcanvasで - f8g
  • OperaのCanvasが凄いのでモザイク - f8g

    いまさらながらOperaにはgetPixel/setPixelがあることを知りました。 http://orera.g.hatena.ne.jp/higeorange/20080604/1212505679 Operaさんはすげえぜ! ただ、色の指定が文字列ってところが使いづらい。 ということでモザイク。 CanvasRenderingContext2DGame.Color = function(r, g, b){ this.r = r; this.g = g; this.b = b; this.toString = function(){ return "rgb(" + [this.r, this.g, this.b] + ")"; }; }; CanvasRenderingContext2DGame.prototype._getPixel = function(x, y){ var co

    OperaのCanvasが凄いのでモザイク - f8g
  • ブラウザでお絵描きプログラミング! Processing.js 登場! - IT戦記

    はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing

    ブラウザでお絵描きプログラミング! Processing.js 登場! - IT戦記
  • 1