-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

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

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

https://github.com/DavidDurman/FlexiColorPicker

第二个适用于支持 canvas 标签的现代浏览器。我写了它并称之为 MasterColorPicker。它在一个包装中提供了几种不同的颜色选择器。它已经提供了比标准 Photoshop 颜色选择器更多的功能，我正在处理所有文件和整个项目的更新版本，这将是它所能做的一切......

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

于 2013-12-29T15:10:56.763 回答
0

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

jsFiddle

不过，目前只有 Google Chrome 和 Opera 支持这个。其他浏览器将恢复为用户可以手动输入十六进制颜色的文本字段。
如果你想要一个跨浏览器的解决方案，你可以使用这个 jQuery 插件或其他在这里找到的插件。

于 2013-01-07T16:00:39.010 回答