Home > スポンサー広告 > User JavaScriptの練習 - canvas要素でページに円を描く

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/78-82bf6033
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog
Trackback from GameSprit 2008-03-15 (土) 17:43

Javascriptとcanvasとインターフェイス(5)・・・○を描く

前回まででマルバツゲームのマスを描画しました。今回は、○のコマを描いてみます... (more…)

Home > スポンサー広告 > User JavaScriptの練習 - canvas要素でページに円を描く

Home > user javascript > User JavaScriptの練習 - canvas要素でページに円を描く

User JavaScriptの練習 - canvas要素でページに円を描く

user javascript

Opera User JavaScriptの練習をしています。

canvas要素で円弧を描く

arc(x, y, 半径, startAngle, endAngle, 回る方向)

startAngle と endAngle は、x軸の正の方向から見て時計回りの角度をラジアンの単位で表したものです。

Canvasリファレンス - arcメソッド- HTML5.JP

ページに円を描くスクリプト

ページを開くと、ページ上の適当な位置に円を描く

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


document.addEventListener('load', function() {
    // canvas要素の作成
    var canvas = document.createElement('canvas');
    var height = window.innerHeight;
    var width = window.innerWidth;
    canvas.setAttribute('height', height + 'px');
    canvas.setAttribute('width', width + 'px');
    // canvas要素の CSS
    canvas.style.cssText = 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'z-index: 100;';
    document.body.appendChild(canvas);

    // 描画コンテクストを得る
    var context = canvas.getContext('2d');
    var color = [ 'red', 'yellow', 'blue', 'green', 'orange'];
    // 円を描く
    for ( var i=0; i < 19; i++ ) {
        context.beginPath();
        context.fillStyle = color[ floorRandom( color.length)];
        context.arc( floorRandom( width), floorRandom( height), floorRandom( 60) + 10, 0, Math.PI * 2, false);
        context.fill();
    }
    
    function floorRandom(number) {
        return Math.floor(Math.random() * number);
    }
}, false);
window.innerWidth
表示領域の幅(スクロールバーを含む)
window.innerHeight
表示領域の高さ(スクロールバーを含む)

参考

Comments:0

Comment Form

Trackback+Pingback:1

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/78-82bf6033
Listed below are links to weblogs that reference
User JavaScriptの練習 - canvas要素でページに円を描く from Karafuto Blog
Trackback from GameSprit 2008-03-15 (土) 17:43

Javascriptとcanvasとインターフェイス(5)・・・○を描く

前回まででマルバツゲームのマスを描画しました。今回は、○のコマを描いてみます... (more…)

Home > user javascript > User JavaScriptの練習 - canvas要素でページに円を描く

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

Page Top

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