HTML5 Javascript 画笔

Question

我需要创建一个干净光滑的不透明画笔。

这是我需要的一个画线示例：

第二张图片我得到了什么：

虽然我移动光标的速度更快，但绘图线上的圆圈却变少了

    var el = document.getElementById('c');
    var ctx = el.getContext('2d');
    ctx.lineJoin = "round"
    ctx.strokeStyle = "#000000"; 
    ctx.globalAlpha = "0.2"; 
    ctx.lineWidth = 30; 
    ctx.globalCompositeOperation = "source-over";

    var isDrawing, lastPoint;

    el.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
    };

    el.onmousemove = function(e) {
    if (!isDrawing) return;

        var currentPoint = { x: e.clientX, y: e.clientY };

        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
        ctx.lineTo(currentPoint.x, currentPoint.y);
        ctx.closePath();
        ctx.stroke();

        lastPoint = currentPoint;
    };

    el.onmouseup = function() {
        isDrawing = false;
    };

    function clearit() {
        ctx.clearRect(0,0, 1000, 1000);
    }

canvas { border: 1px solid #ccc }

<canvas id="c" width="500" height="300"></canvas>
<input type="button" id="clear-btn" value="Clear it" onclick="clearit()">

Answer 1

你的问题是在 mousemove 中你开始和关闭了很多路径，所以线的不透明度超载了。

如果您添加：

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(250,250);
ctx.lineTo(200,100);
ctx.stroke();

可以看到去掉了效果

部分解决方案（你看不到你在画什么）是这样的：

 el.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
    };

    el.onmousemove = function(e) {
    if (!isDrawing) return;

        var currentPoint = { x: e.clientX, y: e.clientY };      
        ctx.lineTo(currentPoint.x, currentPoint.y);
        lastPoint = currentPoint;
    };

    el.onmouseup = function() {
        isDrawing = false;
        ctx.closePath();
        ctx.stroke();
    };

现在我们用 mousedown 开始路径，'draw' mousemove 中的路径，并用 mouseup 描边路径。我不确定 'closePath()' 效果，但内圈消失了。

Answer 2

使用两个 canvases 也有一个巧妙的解决方法：

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border:1px solid #c3c3c3;
}
</style>

</head>   
<body>   
<canvas id="cv1" width="400" height="300">    
</canvas>
<canvas id="cv2" width="400" height="300">
</canvas>
<hr>
<button onclick='merge();'>Merge</button>
<script>
var el1 = document.getElementById('cv1');
var el2 = document.getElementById('cv2');
    var ctx1 = el1.getContext('2d');
    var ctx2 = el2.getContext('2d');
    ctx1.lineJoin = "round"
    ctx1.strokeStyle = "#00FF00"; 
    ctx1.globalAlpha = "0.2"; 
    ctx1.lineWidth = 30; 
    ctx1.globalCompositeOperation = "source-over";
  ctx2.globalCompositeOperation = "source-over";
    var isDrawing, lastPoint;
el1.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
    };  
    el1.onmousemove = function(e) {
    if (!isDrawing) return;
        var currentPoint = { x: e.clientX, y: e.clientY };
        ctx1.beginPath();
        ctx1.moveTo(lastPoint.x, lastPoint.y);
        ctx1.lineTo(currentPoint.x, currentPoint.y);
        ctx1.closePath();
        ctx1.stroke();
        lastPoint = currentPoint;
    };
    el1.onmouseup = function() {
        isDrawing = false;
    };
function merge() {
ctx2.putImageData(ctx1.getImageData(0,0,400,300),0,0);
}
</script>
</body>
</html>

这让你可以在一个上画画 canvas，但如果你不喜欢你所做的，你可以撤消它。

HTML5 Javascript 画笔

HTML5 Javascript paint brush

html

javascript

brush

html5-canvas