Question

我需要创建一个不透明的刷子干净而光滑。

这是我需要的一个绘图线示例： enter image description here

第二张图片我得到了什么： enter image description here

当我更快地移动光标时，我在绘图线上得到的圆圈少了一些

＆＃13;

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

＆＃13;

canvas { border: 1px solid #ccc }

＆＃13;

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

＆＃13;

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开始路径，在mousemove中“绘制”路径，并使用mouseup描边路径。我不确定'closePath（）'效果，但内圈消失了。

Answer 2

使用两幅画布还有一个很好的工作：

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

这允许你在一个画布上绘制，但如果你不喜欢你所做的，你可以反转它。

HTML5 Javascript画笔

2 个答案: