Home > スポンサー広告 > User JavaScriptの練習 - canvas要素の初歩

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/76-ed97427e
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScriptの練習 - canvas要素の初歩

Home > user javascript > User JavaScriptの練習 - canvas要素の初歩

User JavaScriptの練習 - canvas要素の初歩

user javascript

Opera User JavaScriptを分からん人間が練習してます。

canvas要素で線を引いてみる

canvas要素
<canvas id="canvas" width="400" height="400"></canvas>

User JavaScriptで canvas要素を作成するとこんな感じ。

var canvas = document.createElement('canvas');
canvas.setAttribute( 'width', 400);
canvas.setAttribute( 'height', 400);
document.appendChild( canvas)

canvas要素だけでは描画されない。

getContextメソッドによって 描画コンテクストを得られる。描画機能にアクセスできるようになる。

var context = canvas.getContext('2d');
矩形を描く

SVG とは異なり、canvas は一つの原始図形 - 矩形 - のみをサポートしています。 他の全ての図形は一つ以上のパスを組み合わせて作らなくてはなりません。幸いなことに、とても複雑な図形を作ることが可能なパスを描く関数のコレクションがあります。

Canvas tutorial:Drawing shapes - MDC

strokeRect( x, y, width, height)
輪郭の描かれた矩形を描く。
fillRect( x, y, width, height)
塗られた矩形を描く。
clearRect( x, y, width, height)
指定された領域を消去する。
パスを使う
beginPath()
パスを開始する。
closePath()
パスを閉じる。始点と最後の点を直線で結ぶ。
moveTo( x, y)
座標を移動する。何も描画されない。
lineTo( x, y)
直線を描く。

最後に stroke または fill メソッドによって実際に canvasに描画される。

stroke()
輪郭の描かれた図形を描く。
fill()
輪郭のない単色の図形を描く。

ページに矩形と線を描くスクリプト

ページを開くと、ページの一番上に矩形と線を描く。

// ==UserScript==
// @include *
// @exclude
// ==/UserScript==


document.addEventListener('load', function() {

    // canvas要素の作成
    var canvas = document.createElement('canvas');
    canvas.setAttribute( 'width', 300);
    canvas.setAttribute( 'height', 200);
    canvas.style.border = 'thin green solid';
    document.body.insertBefore( canvas, document.body.firstChild );

    // 描画コンテクストを得る
    var context = canvas.getContext('2d');

    // 矩形を描く
    context.fillRect(50,50,100,100);
    // 線を引く
    context.beginPath();
    context.moveTo( 200, 50);
    context.lineTo( 200, 150);
    context.lineTo( 250, 50);
    context.lineTo( 250, 150);
    context.stroke();
}, false);

canvas要素で描いた矩形と線

スクリプトを実行して canvas要素に描かれた矩形と線。

参考にしたサイト

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/76-ed97427e
Listed below are links to weblogs that reference
User JavaScriptの練習 - canvas要素の初歩 from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - canvas要素の初歩

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。