选择“绘制大小(HTML 画布)”

Question

我想设置铅笔的绘制大小，

但是我找不到怎么做，我自己也解决不了。我不需要按钮或我只想知道在哪里更改/添加代码的东西。所以我可以设置绘制大小，稍后我将添加一个简单的下拉菜单。感谢您的帮助。

现场演示（启用脚本）

var started = false;
var canvas, context;
var stampId = '';
var lastColor = 'black';
var lastStampId = '';
var enableDraw = false;
function init() {
    canvas = $('#imageView').get(0);
    context = canvas.getContext('2d');
    //########################################
    //#Auto-adjust canvas size to fit window.#
    //########################################
    canvas.width = window.innerWidth - 75;
    canvas.height = window.innerHeight - 75;
    //###########################################################################
    //#$('#container').get(0).addEventListener('mousemove', onMouseMove, false);#
    //###########################################################################
    canvas.addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('click', onClick, false);
    canvas.addEventListener('mousedown', function (e) {
        enableDraw = true;
    }, false);
    canvas.addEventListener('mouseup', function (e) {
        enableDraw = false;
        started = false;
    }, false);
    $('#cat').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#dragonfly').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#ladybug').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#heart').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#dog').get(0).addEventListener('click', function (e) {
        onStamp(e.target.id);
    }, false);
    $('#fill').get(0).addEventListener('click', function (e) {
        onFill();
    }, false);
    $('#save').get(0).addEventListener('click', function (e) {
        onSave();
    }, false);
    $('#download').get(0).addEventListener('click', function (e) {
        onSave();
    }, false);
}
function onMouseMove(ev) {
    var x, y;
    //#########################
    //#Get the mouse position.#
    //#########################
    if (ev.layerX >= 0) {
        //#########
        //#Firefox#
        //#########
        x = ev.layerX;
        y = ev.layerY;
    }
    else if (ev.offsetX >= 0) {
        //#######
        //#Opera#
        //#######
        x = ev.offsetX;
        y = ev.offsetY;
    }
    if (enableDraw && stampId.length === 0) {
        if (!started) {
            started = true;
            context.beginPath();
            context.moveTo(x, y);
        }
        else {
            context.lineTo(x, y);
            context.stroke();
        }
    }
    $('#stats').text(x + ', ' + y);
}
function onClick(e) {
    if (stampId.length > 0) {
        context.drawImage($(stampId).get(0), e.pageX - 90, e.pageY - 60, 80, 80);
    }
}
function onColorClick(color) {
    //###################################################
    //#Start a new path to begin drawing in a new color.#
    //###################################################
    context.closePath();
    context.beginPath();
    //#######################
    //#Select the new color.#
    //#######################
    context.strokeStyle = colors;
    //###########################
    //#Highlight selected color.#
    //###########################
    var borderColor = 'white';
    if (color === 'white' || color === 'yellow') {
        borderColor = 'black';
    }
    $('#' + lastColor).css("border", "0px dashed white");
    $('#' + color).css("border", "1px dashed " + borderColor);
    //#########################################################
    //#Store color so we can un-highlight it next time around.#
    //#########################################################
    lastColor = color;
    //###########################################################
    //#Turn off any stamp selection, since we're painting again.#
    //###########################################################
    $(stampId).css("border", "0px dashed white");
    stampId = '';
}
function onFill() {
    //###################################################
    //#Start a new path to begin drawing in a new color.#
    //###################################################
    context.closePath();
    context.beginPath();
    context.fillStyle = context.strokeStyle;
    context.fillRect(0, 0, canvas.width, canvas.height);
}
function onStamp(id) {
    //#########################
    //#Update the stamp image.#
    //#########################
    stampId = '#' + id;
    if (lastStampId === stampId) {
        //########################################################
        //#User clicked the selected stamp again, so deselect it.#
        //########################################################
        stampId = '';
    }
    $(lastStampId).css("border", "0px dashed white");
    $(stampId).css("border", "1px dashed black");
    $('#' + lastColor).css("border", "0px dashed white");
    //#########################################################
    //#Store stamp so we can un-highlight it next time around.#
    //#########################################################
    lastStampId = stampId;
}
function onSave() {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    download.setAttribute("href", image);
}

Answer 1

使用 canvas 的 lineWidth 属性。

这是您需要设置/添加的代码部分：

...
if (enableDraw && stampId.length === 0) {
   if (!started) {
      started = true;
      context.beginPath();
      context.moveTo(x, y);
   } else {
      context.lineTo(x, y);
      // set draw size
      context.lineWidth = 10;
      context.stroke();
   }
}
...

请参阅工作示例。