Home > スポンサー広告 > User JavaScriptの練習 - canvasでウェブセーフカラーの表

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/80-30edec99
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog
Trackback from jinkoさんSL日記 2008-10-08 (水) 15:33

LSLのカラーに変換するツールを作ってみました^^

なんか最近、どっぷりとセカンドライフのスクリプトにハマってたりします。とゆっても・・・そろそろ飽きてきたんですが・・・はは・・LSLで取り扱うカラーは、普段見慣れない0~1までの小数を使った標記になってるんですが、#FFFFFFのような、普段使ってる16進数の表記 (more…)

Home > スポンサー広告 > User JavaScriptの練習 - canvasでウェブセーフカラーの表

Home > user javascript > User JavaScriptの練習 - canvasでウェブセーフカラーの表

User JavaScriptの練習 - canvasでウェブセーフカラーの表

user javascript

Operaで役に立たない User JavaScriptを書いています。

canvas要素でウェブセーフカラーの表を描くスクリプト

ウェブセーフカラーチャート

ページを開くと、ページの上部にウェブセーフカラーの図を表示する。カラーチャートにマウスポインタを乗せると、色の値がツールチップに表示される。ESCを押すと、カラーチャートが消える。

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


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

    // ツールチップを作成
    var tooltip = document.createElement('div');
    tooltip.style.cssText = 'position: absolute;' + 'z-index: 101;' + 'border: 1px solid black;' + 'padding: 2px;' +
                             'font-size: 12px;' + 'color: black;' + 'background-color: white;';
    document.body.appendChild(tooltip);

    // 描画コンテクストを得る
    var context = canvas.getContext('2d');
    // カラーチャートを作成
    var i, j ,k;
    for ( i=0; i<6; i++) {
        for ( j=0; j<6; j++) {
            for ( k=0; k<6; k++) {
                context.fillStyle = 'rgb(' + i * 51 + ',' + j * 51 + ',' + k * 51 + ')';
                context.fillRect(i * 120 + j * 20, k * 20, 20, 20);
            }
        }
    }
    
    // ツールチップを表示
    canvas.addEventListener('mousemove', function(e) {
        var colorCode = floorDivision( e.clientX, 120) * 51 * 65536 + floorDivision( e.clientX % 120, 20) * 51 * 256 + floorDivision( e.clientY, 20) * 51;
        colorCode = colorCode.toString( 16);
        colorCode = '#' + '000000'.substring( colorCode.length, 6) + colorCode;
        tooltip.innerText = colorCode;
        tooltip.style.left = e.clientX + 20 + 'px';
        tooltip.style.top = e.clientY + 20 + 'px';
        tooltip.style.display = '';
        e.stopPropagation();
    }, false);
    // ツールチップを隠す
    canvas.addEventListener('mouseout', function(e) {
        tooltip.style.display = 'none';
    }, false);

    // 「ESC」を押したら、カラーチャートを消す
    document.addEventListener('keydown', function(e) {
        if ( e.keyCode == 27) {
            document.body.removeChild( canvas );
        }
    }, false);

    function floorDivision( number, division) {
        return Math.floor( number / division);
    }
}, false);

カラーチャートは矩形をループで繰り返し描いてるだけです。

ツールチップに色の値を16進数で表示する。(例 #33ff00)

10進数を16進数に変換する
colorCode = colorCode.toString( 16);

参考

Comments:0

Comment Form

Trackback+Pingback:1

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/80-30edec99
Listed below are links to weblogs that reference
User JavaScriptの練習 - canvasでウェブセーフカラーの表 from Karafuto Blog
Trackback from jinkoさんSL日記 2008-10-08 (水) 15:33

LSLのカラーに変換するツールを作ってみました^^

なんか最近、どっぷりとセカンドライフのスクリプトにハマってたりします。とゆっても・・・そろそろ飽きてきたんですが・・・はは・・LSLで取り扱うカラーは、普段見慣れない0~1までの小数を使った標記になってるんですが、#FFFFFFのような、普段使ってる16進数の表記 (more…)

Home > user javascript > User JavaScriptの練習 - canvasでウェブセーフカラーの表

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

Page Top

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