-2

以下は、ユーザーがキャンバスに描画できるようにするコードです。これは問題なく動作します。私が問題を抱えている部分は、javascript で異なる色を選択することであり、ユーザーはより多くの色を選択できます。

ここに描画部分のコードがあります

window.addEventListener("load", canvasAnimate, false);

    function canvasAnimate() {
    var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    window.addEventListener('mousemove', MouseIsMoving, false);
    window.addEventListener('mousedown', sketchit, false);
    window.addEventListener('mouseup', dontDraw, false);
};

//  GLOBAL VARIABLES

    var mouseX;
    var mouseY;
    var MouseIsDown = false // this will be used to determine if the mouse is down or not


//   e means the event, this stores the mouse events in the variable mouseX and mouseY
    function MouseIsMoving(e) {
        mouseX = e.pageX - canvas.offsetLeft; //the offset makes the coordinates fit for     the canvas box
        mouseY = e.pageY - canvas.offsetTop;
        document.getElementById('mouseCoordinates').innerHTML = 'X: ' + mouseX + ' Y: ' +     mouseY;
        if (MouseIsDown) {
            context.lineTo(mouseX, mouseY);
            context.stroke();
        }
    }

    function sketchit(e) {
        context.beginPath()
        context.moveTo(mouseX, mouseY);
        context.lineTo(mouseX,mouseY)
        context.lineCap = 'round'; //default lineCap and lineWidth
        context.lineWidth = 3;
        context.strokeStyle = '#000000' //default color
        context.stroke();
        MouseIsDown = true;
    };

    function dontDraw() {
        if (MouseIsDown) {
            MouseIsDown = false;
        }
    }
4

2 に答える 2

0

2 つの JavaScript カラー ピッカー アプリ:

1 つ目は、IE6 までのすべてのブラウザーをカバーしています。古いブラウザーをサポートする必要がある場合は、これが最適なソリューションだと思います。

https://github.com/DavidDurman/FlexiColorPicker

2 つ目は、canvas タグをサポートする最新のブラウザー用です。私はそれを書き、MasterColorPicker と呼んでいます。1 つのパッケージで複数の異なるカラー ピッカーを提供します。すでに標準の Photoshop カラー ピッカー以上のものを提供しており、私はすべてのファイルとプロジェクト全体の更新バージョンに取り組んでおり、それが可能なすべてです...

http://softmoon-webware.com/MasterColorPicker_instructions.php

于 2013-12-29T15:10:56.763 に答える
0

を使用<input type="color" />してカラーピッカーを作成できます。正確な外観はブラウザーの実装によって異なります。

jsフィドル

ただし、現在これをサポートしているのは Google Chrome と Opera だけです。他のブラウザーは、ユーザーが手動で 16 進数の色を入力できるテキスト フィールドに戻ります。
クロスブラウザー ソリューションが必要な場合は、この jQuery プラグインまたはここにある他のプラグインを使用できます。

于 2013-01-07T16:00:39.010 に答える