Javascript 自定义大小调整工具在画布图形中不起作用

这是我的

画布的HTML：

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

我正在使用画布绘制工具。问题是，我无法为绘图选择合适的尺寸。我定义了“小、正常、大、大”等尺寸。默认选择是正常的。我已经写了一些函数来确定半径，但它不起作用。有人能帮我吗

---

非常感谢

您可以设置不同的

上下文.lineWidth

来设置光标大小。我已经用它更新了代码

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;
});

函数重画（）{
单击size.length=0；
clearRect（0,0，context.canvas.width，context.canvas.height）；
//context.strokeStyle=“#df4b26”；
context.lineJoin=“round”；
//context.lineWidth=5；
对于（变量i=0；i

见

编辑

$(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();
        }
    }
});

$（文档）.ready（函数（）{
/*声明全局变量*/
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var涂料；
var语境；
var帆布；
var colorpulse=“#cb3594”；
var colorGreen=“#659b41”；
var colorYellow=“#ffcf33”；
var colorBrown=“#986928”；
var colorRed=“#ff0000”；
var curColor=颜色紫色；
var clickColor=新数组（）；
var clickSize=新数组（）；
var curSize=1；
/*声明全局变量结束*/
context=document.getElementById（'myNewCanvasColumn'）.getContext（“2d”）；
var canvasDiv=document.getElementById（'canvasDiv'）；
canvas=document.createElement（'canvas'）；
canvas.setAttribute（'width'，700）；
canvas.setAttribute（'height'，300）；
setAttribute（'id'，'canvas'）；
canvasDiv.appendChild（canvas）；
if（G_vmlCanvasManager的类型！=“未定义”）{
canvas=G_vmlCanvasManager.initElement（canvas）；
}
变异半径；
var i=0；
context=canvas.getContext（“2d”）；
/*用于绘图的事件处理程序*/
$（“#画布”）.mousedown（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
油漆=真；
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
重画（）；
});
$（'#canvas'）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，true）；
重画（）；
}
});
$（'#canvas'）.mouseup（函数（e）{
油漆=假；
});
$（'#canvas'）.mouseleave（函数（e）{
油漆=假；
});
$（“#清除”）。单击（函数（）{
clearDrawing（）；
});
/*事件结束处理程序*/
/*自定义颜色选择器*/
$（“#选择绿色”）。单击（函数（）{
curColor=“#659b41”；
});
$（'#choosepurple'）。单击（函数（）{
curColor=“#cb3594”；
});
$（“#选择下图”）。单击（函数（）{
curColor=“#ffcf33”；
});
$（“#选择箭头”）。单击（函数（）{
curColor=“#986928”；
});
$（'#choosered'）。单击（函数（）{
curColor=“#ff0000”；
});
/*自定义颜色选择器的结束*/
/*定制尺寸选择器*/
$（“#选择小”）。单击（函数（）{
草书=1；
});
$（“#选择正常”）。单击（函数（）{
草书=3；
});
$（'#chooselarge'）。单击（函数（）{
草书=5；
});
$（“#选择巨大”）。单击（函数（）{
草书=7；
});
/*自定义大小选择器的结束*/
功能添加单击（x、y、拖动）{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
单击颜色。推送（curColor）；
单击大小。推送（光标）；
//警报（点击大小）；
}
函数clearDrawing（）{
单击X.length=0；
clickY.length=0；
单击拖动。长度=0；
clearRect（0,0，context.canvas.width，context.canvas.height）；
}
函数重画（）{
clearRect（0,0，context.canvas.width，context.canvas.height）；
//context.strokeStyle=“#df4b26”；
context.lineJoin=“round”；
//context.lineWidth=5；
对于（变量i=0；i

---

谢谢，检查了您的代码。但有一个问题。这是因为，半径大小是同时变化的，当你更喜欢使用其他大小调整工具，为一个已经绘制的图像…工程罚款现在。。。已接受：）