火曜日, 6月 23, 2009
[JavaScript]excanvas.jsのサンプル（矩形・円・破線・点線）
▼質問
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 午後 
