javascript - HTML5 Canvas 绘画逼真简单铅笔

Question

我如何创建逼真的简单铅笔工具，而不是像在 MS Windows 绘图程序中那样。我需要这样的结果:

如果我尝试不透明的固体，我会像在 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 之间随机改变第二条线的宽度来获得更多变化？

编辑还可以随机设置第二行的不透明度，例如 1 到 0.8 之间!

永久设置第一行的不透明度，并将此代码添加到函数Stroke()

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

更改了代码片段

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">