itpro-blogger: 6月 2009

Amazon.co.jp ウィジェット

土曜日, 6月 27, 2009

[JavaScript]パラメータの無いメソッド

▼質問
canvasの幅と高さを次の様に取得しようとしたんだがうまくいかないんだ。

exGraph.getCanvas = function( id ) {
/* canvas要素のノードオブジェクト */
var el = document.getElementById( id );
this.canvas = el;
/* 2Dコンテキスト */
this.context_ = this.canvas.getContext( '2d' );
/* canvas要素の幅・高さ */
this.getWidth = function() { return this.canvas.width; };
this.getHeight = function() { return this.canvas.height; };
};

var obj = new exGraph.getCanvas( "sample" );
/* canvasエリアの幅・高さを取得する */
var width = obj.getWidth;

どうしてか教えてくれ！

▼回答
取得する時のコードが間違っているよ。

括弧が足りないんだ！

var width = obj.getWidth();

メソッドの括弧は省略できないんだ。

VBみたいに・・・。

# posted by itpro-blogger @ 3:48 午後 0 comments

火曜日, 6月 23, 2009

[JavaScript]excanvas.jsのサンプル（矩形・円・破線・点線）

▼質問
excanvas.jsのサンプルないかな？

▼回答
次のコードを参考にしてくれ！！



<html>
<head>
<title></title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
if ( typeof( exGraph ) == 'undefined' ) {
    exGraph = new Object();
}
exGraph.getCanvas = function( id ) {
   /* canvas要素のノードオブジェクト */
 var el = document.getElementById( id );
 this.canvas = el;
 /* 2Dコンテキスト */
 this.context_ = this.canvas.getContext( '2d' );
};
exGraph.getCanvas.prototype.draw = function() {
 /* 全てをクリアする */
    this.context_.clearRect();
    /* 矩形を描く */
 this.context_.strokeRect( 20, 15, 100, 100 );
 /* 塗りつぶした矩形を描く */
 this.context_.fillRect( 150, 15, 100, 100 );
 /* 塗りつぶした円を描く */
 this.context_.fillStyle = "rgba( 255, 0, 0, 0.1 )";
 this.context_.strokeStyle = "rgba( 255, 0, 0, 1 )";
 this.context_.beginPath();
 this.context_.arc( 320, 60, 50, 0, Math.PI*2, 1 );
 this.context_.fill();
 this.context_.stroke();
};
exGraph.getCanvas.prototype.drawLine = function( x1, y1, x2, y2, width, type, color ) {
 this.context_.strokeStyle = color;
 this.context_.lineWidth = width;
 this.context_.lineCap = "butt";  /* butt、round、square */
 if ( type == "solid" ) {
  this.context_.beginPath();
  this.context_.moveTo( x1, y1 );
  this.context_.lineTo( x2, y2 );
  this.context_.stroke();
 }
 else if ( type == "dashed" ) {
  var x = x1;
  var y = y1;
  while ( 1 ) {
   this.context_.beginPath();
   this.context_.moveTo( x, y );
   if ( y1 == y2 ) { x = x + width*4; }
   if ( x1 == x2 ) { y = y + width*4; }
   if ( x > x2 ) { x = x2; }
   if ( y > y2 ) { y = y2; }
   this.context_.lineTo( x, y );
   this.context_.stroke();
   if ( y1 == y2 ) { x = x + width*2; }
   if ( x1 == x2 ) { y = y + width*2; }
   if ( x > x2 ) { break; }
   if ( y > y2 ) { break; }
  }
 }
 else if ( type == "dotted" ) {
  this.context_.fillStyle = color;
  var x = x1;
  var y = y1;
  while ( 1 ) {
   this.context_.beginPath();
   this.context_.arc( x, y, width/2, 0, Math.PI*2, 0 );
   this.context_.fill();
   this.context_.stroke();
   if ( y1 == y2 ) { x = x + width*3; }
   if ( x1 == x2 ) { y = y + width*4; }
   if ( x > x2 ) { break; }
   if ( y > y2 ) { break; }
  }
 }
};
exGraph.getCanvas.prototype.drawText = function( x, y, text, font_size, font_family, color ) {
 var div = document.createElement( 'DIV' );
 div.appendChild( document.createTextNode( text ) );
 div.style.fontSize = font_size;
 div.style.fontFamily = font_family;
 div.style.color = color;
 div.style.margin = "0";
 div.style.padding = "0";
 div.style.position = "absolute";
 div.style.left = x.toString() + "px";
 div.style.top = y.toString() + "px";
 this.canvas.parentNode.appendChild( div );
};
window.onload = function() {
 var obj = new exGraph.getCanvas( "sample" );
 if( !obj ) { return; }
 obj.draw();
 /* 実線を描く */
 obj.drawLine( 20, 150, 350, 150, 1, "solid", "rgba( 255, 0, 0, 1 )" );
 obj.drawLine( 20, 210, 20, 280, 1, "solid", "rgba( 255, 0, 0, 1 )" );
 /* 破線を描く */
 obj.drawLine( 20, 170, 350, 170, 2, "dashed", "rgba( 255, 0, 0, 1 )" );
 obj.drawLine( 50, 210, 50, 280, 2, "dashed", "rgba( 255, 0, 0, 1 )" );
 /* 点線を描く */
 obj.drawLine( 20, 190, 350, 190, 2, "dotted", "rgba( 255, 0, 0, 1 )" );
 obj.drawLine( 80, 210, 80, 280, 2, "dotted", "rgba( 255, 0, 0, 1 )" );
 /* 文字列を描く */
 obj.drawText( 150, 230, "文字列", 10, "Arial,sans-serif", "#ff0000" );
 obj.drawText( 150, 250, "文字列", 20, "Arial,sans-serif", "#0000ff" );
};
</script>
</head>
<body>
<div><canvas width="400" height="300" id="sample" style="border:1px solid #4c4c4c;"></canvas></div>
</body>
</html>

# posted by itpro-blogger @ 9:58 午後 0 comments

[JavaScript]clearRectメソッド（excanvas.js）

▼質問
次の様に、透明にしたい領域を指定してもうまくその領域が透明にならずに

描画した全ての図形が消えるんだ！？

コンテキスト.clearRect( x座標, y座標, width（幅）, height（高さ） );

どうしてか教えてくれ！！

▼回答
IE（Internet Explorer）では、全てクリアされるのが正しいようだ。

そうやって使うらしいよ？！

・・・。

excanvas.jsの中身を見ても、そんなパラーメタを定義したメソッド

見つからないしね・・・。

# posted by itpro-blogger @ 2:14 午後 0 comments

日曜日, 6月 21, 2009

[JavaScript]prototypeプロパティって何？

▼質問
prototypeプロパティって何？

▼回答
prototypeプロパティは、クラスにメソッドを追加する時に使うんだよ！

クラス名.prototype.メソッド名 = 関数名;

function クラス名() {
this.変数名1 = "";
function 関数名1( パラメータ１ )
{
this.変数名1 = パラメータ１;
}
クラス名.prototype.メソッド名 = 関数名1;
return this;
}

var obj = new クラス名();
obj.メソッド名( パラメータ２ );
var 変数1 = obj.変数名1;

変数1が、パラメータ２となる。

・オブジェクトへのプロパティの追加
オブジェクト名.任意のプロパティ名 = 値;
var obj = new クラス名();
obj.新規プロパティ名 = "";
obj.["新規プロパティ名"] = "";

・オブジェクトへのメソッドの追加
オブジェクト名.任意のメソッド名 = 関数名;

function 関数名1( パラメータ１ )
{
this.変数名1 = パラメータ１;
}
var obj = new クラス名();
obj.新規メソッド名 = 関数名1;

■参考サイト
プロパティとメソッドについて

# posted by itpro-blogger @ 6:51 午後 0 comments

金曜日, 6月 19, 2009

[JavaScript]グラフ（excanvas.js）

■参考サイト
ExplorerCanvas
[Think IT] 第1回：JavaScriptを使って描画するCanvasとは？ (2/3)
canvas で実現する高度なグラフィック表現 - WebOS Goodies
JavaScript で，クリックした座標に点を追加できるグラフチャートを描画する方法　（jQuery のプラグイン jquery.sparklines / jquery.flotの使い方) - 主に言語とシステム開発に関して
HTMLタグファレンス
Canvas チュートリアル - MDC

# posted by itpro-blogger @ 5:51 午後 0 comments

金曜日, 6月 12, 2009

[HTML]font-sizeの単位はpt（ポイント）?px（ピクセル）?

▼質問
font-sizeの単位は、pt（ポイント）?

それとも、px（ピクセル）?

素朴な疑問

どっちなんだ？

教えてくれ！！

▼回答
どちらでも指定できるよ！

■参考サイト
font-sizeにはptではなくpxを使おう - みずぴー日記

# posted by itpro-blogger @ 4:22 午前 0 comments

[HTML]textareaタグのフォント指定

▼質問
textareaタグのフォントを指定したいんだ。

どうやったら指定できるか教えてくれ！！

▼回答
style属性を使うんだ。

次の様に指定すればよい！

style="font-size:サイズpx;"

# posted by itpro-blogger @ 4:18 午前 0 comments

木曜日, 6月 11, 2009

[JavaScript]警告: getElementById() に空文字列が渡されました。

▼質問
IE（Internet Explorer）でうまく動いていたホームページを

試しにFirefoxで表示したら

次のエラーが出るんだ。

「警告: getElementById() に空文字列が渡されました。」

どうしてか教えてくれ！

▼回答
getElementById(名前)で指定している名前の属性が

name属性じゃないか確認してみてくれ！！

IEでは、getElementByIdとname属性の

あいまいな組合せでも動くんだ。

name属性の時は、getElementsByNameを使うんだ。
←getElementByNameじゃなくてgetElementsByName
Elementにsが付くことに注意してくれ！

getElementByIdの時は、id属性を定義するんだ。

Firefoxでも動くようにするにはid属性とname属性を

定義しておいた方がいいぞ！！

# posted by itpro-blogger @ 3:02 午後 0 comments

itpro-blogger