HTML5 холст краска реалистичный простой карандаш

Question

Как я могу создать реалистичный простой инструмент карандаша, а не как в программе красок окон ms. Мне нужно привести, как это:

если я попробовать твердый без прозрачной я получить как через MS Windows программ краски не реалистично карандаш, если я пытаюсь добавить непрозрачности я вижу круги это тоже не реально:

Как Я могу получить инструмент карандаша, как на первом снимке? мой пытается пример:

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var previousMouseX = null; 
 
var previousMouse = null; 
 
var isDrawing = false; 
 

 
var lineWidth = 10; 
 
var brush = 1; 
 
var myColor = "#FF0000"; 
 

 
function getMousePosition(canvas, evt) { 
 
    
 
    var rect = canvas.getBoundingClientRect(); 
 
    
 
    if (evt.clientX !== undefined && evt.clientY !== undefined) { 
 
     return { 
 
      x: evt.clientX - rect.left, 
 
      y: evt.clientY - rect.top 
 
     }; 
 
    } 
 
} 
 

 
/* BUTTONS */ 
 
$("#btn1").on("click", function() { 
 
    ctx.globalAlpha = "0.2"; 
 
}); 
 

 
$("#btn2").on("click", function() { 
 
    ctx.globalAlpha = "1"; 
 
}); 
 

 
$("#change-color").on("click", function() { 
 
    ctx.strokeStyle = "#009933"; 
 
}); 
 

 
$("#canvas").on("mousedown", function(e) { 
 
    isDrawing = true; 
 
    var pos = getMousePosition(canvas, e); 
 
    move(pos.x, pos.y); 
 

 
}); 
 

 
$("#canvas").on("mousemove", function(e) { 
 
    if(isDrawing) { 
 
     var pos = getMousePosition(canvas, e); 
 
     stroke(pos.x, pos.y); 
 
    } 
 
}); 
 

 
$("#canvas").on("mouseup", function() { 
 
    isDrawing = false; 
 
}); 
 

 
function stroke(mouseX, mouseY) { 
 
     ctx.globalCompositeOperation = "source-over"; 
 
     ctx.lineJoin = ctx.lineCap = "round"; 
 
     ctx.lineWidth = 10; 
 
     ctx.beginPath(); 
 
     ctx.moveTo(previousMouseX, previousMouseY); 
 
     ctx.lineTo(mouseX, mouseY); 
 
     ctx.closePath(); 
 
     ctx.stroke(); 
 
     move(mouseX, mouseY); 
 
} 
 

 
function move(mouseX, mouseY) { 
 
     previousMouseX = mouseX; 
 
     previousMouseY = mouseY; 
 
}

canvas { 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="button" id="btn1" value="Transparent"> 
 
<input type="button" id="btn2" value="Solid"> 
 
<input type="button" id="change-color" value="Green color"><br /> 
 
<canvas id="canvas" width="500" height="500">

Answer 1

ли это идти где-нибудь рядом делать то, что вы хотите?

Нарисуйте карандаш, используя прозрачную, ширину линии 10, а затем нарисуйте линию сплошной, используя меньшую ширину линии (8). Возможно, вы могли бы получить больше вариаций, произвольно меняя ширину второй линии между 7, 8 и 9?

EDIT также может случайно установить непрозрачность второй линии между словами 1 и 0,8!

Постоянно установить непрозрачность на первой линии и добавили этот код в функции инсульта()

ctx.globalAlpha = "1"; 
    ctx.lineWidth = 6; 
    ctx.beginPath(); 
    ctx.moveTo(previousMouseX, previousMouseY); 
    ctx.lineTo(mouseX, mouseY); 
    ctx.closePath(); 
    ctx.stroke(); 

Changed фрагмент кода

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var previousMouseX = null; 
 
var previousMouse = null; 
 
var isDrawing = false; 
 

 
var lineWidth = 10; 
 
var brush = 1; 
 
var myColor = "#FF0000"; 
 

 
function getMousePosition(canvas, evt) { 
 
    
 
    var rect = canvas.getBoundingClientRect(); 
 
    
 
    if (evt.clientX !== undefined && evt.clientY !== undefined) { 
 
     return { 
 
      x: evt.clientX - rect.left, 
 
      y: evt.clientY - rect.top 
 
     }; 
 
    } 
 
} 
 

 
/* BUTTONS */ 
 
$("#btn1").on("click", function() { 
 
    ctx.globalAlpha = "0.2"; 
 
}); 
 

 
$("#btn2").on("click", function() { 
 
    ctx.globalAlpha = "1"; 
 
}); 
 

 
$("#change-color").on("click", function() { 
 
    ctx.strokeStyle = "#009933"; 
 
}); 
 

 
$("#canvas").on("mousedown", function(e) { 
 
    isDrawing = true; 
 
    var pos = getMousePosition(canvas, e); 
 
    move(pos.x, pos.y); 
 

 
}); 
 

 
$("#canvas").on("mousemove", function(e) { 
 
    if(isDrawing) { 
 
     var pos = getMousePosition(canvas, e); 
 
     stroke(pos.x, pos.y); 
 
    } 
 
}); 
 

 
$("#canvas").on("mouseup", function() { 
 
    isDrawing = false; 
 
}); 
 

 
function stroke(mouseX, mouseY) { 
 
     ctx.globalCompositeOperation = "source-over"; 
 
     ctx.lineJoin = ctx.lineCap = "round"; 
 
     ctx.lineWidth = 10; 
 
     ctx.globalAlpha = "0.2"; //NOTE ALWAYS SET TO 'TRANSPARENT' needs variable if you want to switch to solid. 
 
     ctx.beginPath(); 
 
     ctx.moveTo(previousMouseX, previousMouseY); 
 
     ctx.lineTo(mouseX, mouseY); 
 
     ctx.closePath(); 
 
     ctx.stroke(); 
 

 
     ctx.globalAlpha = "1"; 
 
     ctx.lineWidth = 6; 
 
     ctx.beginPath(); 
 
     ctx.moveTo(previousMouseX, previousMouseY); 
 
     ctx.lineTo(mouseX, mouseY); 
 
     ctx.closePath(); 
 
     ctx.stroke(); 
 

 
     move(mouseX, mouseY); 
 
} 
 

 
function move(mouseX, mouseY) { 
 
     previousMouseX = mouseX; 
 
     previousMouseY = mouseY; 
 
}

canvas { 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="button" id="btn1" value="Transparent"> 
 
<input type="button" id="btn2" value="Solid"> 
 
<input type="button" id="change-color" value="Green color"><br /> 
 
<canvas id="canvas" width="500" height="500">

Answer 2

Вот карандашный эффект.

Это адаптировано из этого славного эффекта меловой сделал Мохамед Moustafa: http://codepen.io/mmoustafa/pen/gmEdk

Пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw,ch; 
 
var $canvas=$("#canvas"); 
 
var canvasOffset=$canvas.offset(); 
 
var offsetX=canvasOffset.left; 
 
var offsetY=canvasOffset.top; 
 
var scrollX=$canvas.scrollLeft(); 
 
var scrollY=$canvas.scrollTop(); 
 

 
var isDown=false; 
 
var startX,startY,mouseX,mouseY; 
 

 

 
var xLast = 0; 
 
var yLast = 0; 
 
var brushDiameter=2; 
 
var fill1='rgba(255,255,255,0.5)'; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/pad.jpg"; 
 
function start(){ 
 

 
    cw=canvas.width=img.width; 
 
    ch=canvas.height=img.height; 
 

 
    ctx.fillStyle = fill1; \t 
 
    ctx.strokeStyle = fill1; \t 
 
    ctx.lineWidth = brushDiameter; 
 
    ctx.lineCap = 'round'; 
 

 
    ctx.drawImage(img,0,0); 
 

 
    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 
 

 
} 
 

 
function handleMouseDown(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    getOffset(); 
 
    xLast=mouseX=parseInt(e.clientX-offsetX); 
 
    yLast=mouseY=parseInt(e.clientY-offsetY); 
 

 
    isDown=true; 
 

 
    draw(mouseX+1, mouseY+1); 
 
} 
 

 
function handleMouseUp(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    isDown=false; 
 
} 
 

 
function handleMouseOut(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    isDown=false; 
 
} 
 

 
function handleMouseMove(e){ 
 
    if(!isDown){return;} 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    getOffset(); 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    draw(mouseX,mouseY); 
 
} 
 

 
//252,254,171   
 
function draw(x,y){ 
 
    ctx.strokeStyle = 'rgba(0,0,0,'+(0.4+Math.random()*0.2)+')'; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(xLast, yLast); \t \t 
 
    ctx.lineTo(x, y); 
 
    ctx.stroke(); 
 

 
    // Chalk Effect 
 
    var length = Math.round(Math.sqrt(Math.pow(x-xLast,2)+Math.pow(y-yLast,2))/(5/brushDiameter)); 
 
    var xUnit = (x-xLast)/length; 
 
    var yUnit = (y-yLast)/length; 
 
    for(var i=0; i<length; i++){ 
 
    var xCurrent = xLast+(i*xUnit); \t 
 
    var yCurrent = yLast+(i*yUnit); 
 
    var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2; \t \t \t 
 
    var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2; 
 
    ctx.clearRect(xRandom, yRandom, Math.random()*2+2, Math.random()+1); 
 
    } 
 
    xLast = x; 
 
    yLast = y; \t 
 
} 
 

 
function getOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top; 
 
}

body{ background-color:ivory; } 
 
#canvas{border:1px solid red; background:white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Drag to draw pencil line on the pad</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>