javascript - HTML5 Canvas 漆逼真的简单铅笔

我如何创建逼真的简单铅笔工具，而不是在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">

最佳答案

这会做任何您想做的事吗？

使用透明的线宽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">