Question

以下是允许用户绘制到画布的代码。这很好用，我有问题的部分是用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;
        }
    }

Answer 1

您可以使用<input type="color" />创建颜色选择器，具体外观取决于浏览器的实现。

jsFiddle

但是，目前only Google Chrome and Opera supports this。其他浏览器将恢复到文本字段，用户可以手动输入十六进制颜色如果您需要跨浏览器解决方案，可以使用this jQuery plugin或其他找到here的人。

Answer 2

两个JavaScript颜色选择器应用程序：

第一个涵盖了IE6的所有浏览器，如果您需要支持旧版浏览器，我认为这是最佳解决方案：

https://github.com/DavidDurman/FlexiColorPicker

第二种是支持canvas标签的现代浏览器。我写了它并称之为MasterColorPicker。它在一个包装中提供了几种不同的颜色选择器。它已经提供了超过标准的Photoshop颜色选择器，我正在研究所有文件和整个项目的更新版本，它将是它的全部......

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

javascript画布绘图应用程序选择颜色

2 个答案: