自定义大小调整工具在Canvas绘图中不起作用

Question

Here is my fiddle

HTML for Canvas:

<div id="canvasDiv"><canvas id="myNewCanvasColumn" width="490" height="220"></canvas></div>

I am working on a canvas drawing tool. Problem is that, i am unable to select the appropriate sizes for drawing. I have defined sizes like "small, normal, large and huge". Default selection is normal. I have wrote some function to determine the radius, but it is not working. Can some one help me?

Thanks a ton..!

Answer 1

You can set different context.lineWidth to set the cursor size. I've updated the code with that.

function redraw() {
    clickSize.length = 0;
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    //context.strokeStyle = "#df4b26";
    context.lineJoin = "round";
    //context.lineWidth = 5;                        
    for (var i = 0; i < clickX.length; i++) {
        context.beginPath();
        if (clickDrag[i] && i) {
            context.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            context.moveTo(clickX[i] - 1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.strokeStyle = clickColor[i];
        context.lineWidth = cursorSize;
        //alert('radius is'+context.lineWidth)
        context.stroke();
    }
}
$('#choosesmall').click(function () {
    curSize = "small";
    cursorSize = 1;
});
$('#choosenormal').click(function () {
    curSize = "normal";
    cursorSize = 3;
});
$('#chooselarge').click(function () {
    curSize = "large";
    cursorSize = 5;
});
$('#choosehuge').click(function () {
    curSize = "huge";
    cursorSize = 7;
});

See the Fiddle

Edit

$(document).ready(function () {

    /* Declaration global Variables */
    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;
    var context;
    var canvas;
    var colorPurple = "#cb3594";
    var colorGreen = "#659b41";
    var colorYellow = "#ffcf33";
    var colorBrown = "#986928";
    var colorRed = "#ff0000";
    var curColor = colorPurple;
    var clickColor = new Array();
    var clickSize = new Array();
    var curSize = 1;
    /* End of Declaring Global Variables */

    context = document.getElementById('myNewCanvasColumn').getContext("2d");
    var canvasDiv = document.getElementById('canvasDiv');
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', 700);
    canvas.setAttribute('height', 300);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);
    if (typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    var radius;
    var i = 0;
    context = canvas.getContext("2d");

    /* Event Handlers for drawing */
    $('#canvas').mousedown(function (e) {
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        paint = true;
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw();
    });
    $('#canvas').mousemove(function (e) {
        if (paint) {
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw();
        }
    });
    $('#canvas').mouseup(function (e) {
        paint = false;
    });
    $('#canvas').mouseleave(function (e) {
        paint = false;
    });
    $("#clear").click(function () {
        clearDrawing();
    });
    /* End of Event Handlers */


    /* Custom Color Pickers */
    $('#choosegreen').click(function () {
        curColor = "#659b41";
    });
    $('#choosepurple').click(function () {
        curColor = "#cb3594";
    });
    $('#chooseyellow').click(function () {
        curColor = "#ffcf33";
    });
    $('#choosebrown').click(function () {
        curColor = "#986928";
    });
    $('#choosered').click(function () {
        curColor = "#ff0000";
    });
    /* End of Custom Color Pickers */

    /* Custom Size Picker */
    $('#choosesmall').click(function () {
        curSize = 1;
    });
    $('#choosenormal').click(function () {
        curSize = 3;
    });
    $('#chooselarge').click(function () {
        curSize = 5;
    });
    $('#choosehuge').click(function () {
        curSize = 7;
    });
    /* End of Custom Size Picker */
    function addClick(x, y, dragging) {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
        clickColor.push(curColor);
        clickSize.push(curSize);
        //        alert(clickSize);
    }

    function clearDrawing() {
        clickX.length = 0;
        clickY.length = 0;
        clickDrag.length = 0;
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    }

    function redraw() {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        //context.strokeStyle = "#df4b26";
        context.lineJoin = "round";
        //context.lineWidth = 5;                        
        for (var i = 0; i < clickX.length; i++) {

            context.beginPath();

            if (clickDrag[i] && i) {
                context.moveTo(clickX[i - 1], clickY[i - 1]);
            } else {
                context.moveTo(clickX[i] - 1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]);
            context.closePath();
            context.strokeStyle = clickColor[i];
            context.lineWidth = clickSize[i];
            // alert(clickColor[i]);
            //alert('radius is'+context.lineWidth)
            context.stroke();
        }
    }
});

Updated Fiddle