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

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/77-d46d7f49
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要素を使ってページに線を引くスクリプト

ページを開くと、ページ上に適当に線を引く。

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


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

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

    // 描画コンテクストを得る
    var context = canvas.getContext('2d');
    // 色を指定
    context.strokeStyle = 'red';
    // 線を引く
    context.beginPath();
    context.moveTo( 100, 100);
    // 座標をランダムに決める
    for ( var i=0; i < 9; i++ ) {
        context.lineTo( Math.floor(Math.random() * parseInt( width)),
                        Math.floor(Math.random() * parseInt( height)));
    }
    context.closePath();
    context.stroke();
}, false);

canvas要素をページ上にする

canvas.style.cssText = 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'z-index: 100;';
strokeStyle
図形の輪郭の色を指定
fillStyle
図形を塗る色を指定

線の座標はページの範囲内をランダムに指定している。

Math.floor(Math.random() * parseInt( width))
Math.floor(Math.random() * parseInt( height))

参考にしたサイト

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/77-d46d7f49
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。