Home > スポンサー広告 > User JavaScriptの練習 - canvasでページに格子模様を被せる

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/79-8fffc5dc
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を書いています。

ページに格子模様を被せるスクリプト

ページを開くと、20ピクセルごとに透明度のある線を引き、100ピクセル単位で不透明な黒色の線を引く。

@を押すと格子模様の表示・非表示を切り替える。

// ==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);
    height = parseInt( height);
    width = parseInt( width);
    // canvas要素の CSS
    canvas.style.cssText = 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'z-index: 100;';
    document.body.appendChild(canvas);

    // 描画コンテクストを得る
    var context = canvas.getContext('2d');
    // 格子模様を作成
    for ( var i=0; i*20<width; i++) {
        context.beginPath();
        if ( i * 2 % 10) {
            context.strokeStyle = 'rgba( 0, 0, 0, 0.3)';
        } else {
            context.strokeStyle = 'rgb( 0, 0, 0)';
        }
        context.moveTo( i*20, 0);
        context.lineTo( i*20, height-1);
        context.stroke();
    }
    for ( i=0; i*20<height; i++) {
        context.beginPath();
        if ( i * 2 % 10) {
            context.strokeStyle = 'rgba( 0, 0, 0, 0.3)';
        } else {
            context.strokeStyle = 'rgb( 0, 0, 0)';
        }
        context.moveTo( 0, i*20);
        context.lineTo( width-1, i*20);
        context.stroke();
    }
    
    // 「@」を押したら、格子模様の表示・非表示を切り替える
    document.addEventListener('keydown', function(e) {
        if ( e.keyCode == 64) {
            if ( canvas.style.display) {
                canvas.style.display = '';
            } else {
                canvas.style.display = 'none';
            }
        }
    }, false);
}, false);
透明度のある色を指定

rgba()の4つ目の値( 0 ~ 1)で透明度を指定する。 0が完全な透明。1が不透明。

context.strokeStyle = 'rgba( 0, 0, 0, 0.3)'

Comments:0

Comment Form

Trackback+Pingback:0

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