Question

在尝试了很多不同的东西后，我终于得到了一个光标，在进入画布时调整大小，但无法弄清楚如何保存颜色。

我的鼠标基于此演示：http://jsfiddle.net/AbdiasSoftware/XcjX9/

function loop() {
    var color = 'rgb(' + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ')';
    makeCursor(color);
    setTimeout(loop, 1000);
}

function makeCursor(color) {

    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');

    cursor.width = 16;
    cursor.height = 16;

    ctx.strokeStyle = color;

    ctx.lineWidth = 4;
    ctx.lineCap = 'round';

    ctx.moveTo(2, 12);
    ctx.lineTo(2, 2);
    ctx.lineTo(12, 2);
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 30)    
    ctx.stroke();

    document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}

以下是我当前的代码：http://jsfiddle.net/Vw4yD/

function init(){
    var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [];

    //Spawn mouse on canvas enter.
    elem.addEventListener('mouseover', function() {
        makeCursor();
    });

    //Destroy mouse on canvas exit.
    elem.addEventListener('mouseout', function() {
        document.body.style.cursor = 'auto';
    });

    // Add event listener for `click` events.
    elem.addEventListener('click', function(event) {
        var x = event.pageX - elemLeft,
            y = event.pageY - elemTop;

        var brushHeight = document.getElementById('brushHeight').value;
        var brushWidth = document.getElementById('brushWidth').value;
        var brushColor = document.getElementById('brushColor').value;

        // Render elements.
        elements.forEach(function(element) {
            //Listen for controls.
            context.fillStyle = brushColor;
            context.fillRect(x, y, brushWidth, brushHeight);
        });
        // Add element.
        elements.push({
            colour: brushColor,
            width: brushWidth,
            height: brushHeight,
        });
    }, false);

    //Draw Mouse.
    function makeCursor() {
        var cursor = document.createElement('canvas'),
            cursorctx = cursor.getContext('2d');

        var x = event.pageX - elemLeft,
            y = event.pageY - elemTop;

        var cursorLeft = cursor.offsetLeft;
            cursorRight = cursor.offsetTop;

        var brushHeight = document.getElementById('brushHeight').value;
        var brushWidth = document.getElementById('brushWidth').value;
        var brushColor = document.getElementById('brushColor').value;

        cursor.width = brushWidth;
        cursor.height = brushHeight;

        cursorctx.fillStyle = brushColor;
        cursorctx.fillRect(x, y, brushWidth, brushHeight);
        cursorctx.fill();

        document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
    }
};

鼠标应该调整大小（它确实如此）并在进入画布时改变颜色，无论如何你们知道要让它工作吗？它让我难过，我已经在它上面工作了大约一整天，无论如何都找不到使用矩形，抚摸作品，但是对于我需要做的基本事情来说太复杂了。对不起，如果这篇文章写得不好，我过去一天的睡眠很少。

Answer 1

在这里你http://jsfiddle.net/Vw4yD/1/

我删除了游标的x和y。它们应该等于0，因为它相对于光标画布而不是主画布。

创建画布光标，无法存储颜色

1 个答案: