wählen draw Größe (HTML canvas)

Question

ich will die Auslosung Größe aus dem Bleistift setzen,

aber ich kann nicht finden, wie man es tun, und ich kann es auf meinem eigenen lösen. Ich brauche keine Schaltfläche oder etwas, ich möchte nur wissen, wo ich den Code ändern/hinzufügen soll. damit ich die drawgröße einstellen kann, werde ich später ein einfaches dropdown menü hinzufügen. danke für die Hilfe.

Live Demo (enable scripts)

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

Verwenden Sie die lineWidth Eigentum der Leinwand.

Dies ist der Teil des Codes ist, wo Sie festlegen müssen/hinzufügen, dass:

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

sehen eine working example.