HTML5JavaScript画笔_Javascript_Html_Html5 Canvas_Brush

HTML5JavaScript画笔

javascript html html5-canvas

HTML5JavaScript画笔,javascript,html,html5-canvas,brush,Javascript,Html,Html5 Canvas,Brush,我需要创建一个不透明刷干净和光滑这是我需要的一个绘制线示例：第二张图片我得到了什么：当我将光标移动得更快时，绘制线中的圆圈会更少 var el=document.getElementById'c'； var ctx=el.getContext'2d'； ctx.lineJoin=圆形 ctx.strokeStyle=000000； ctx.globalAlpha=0.2； ctx.lineWidth=30； ctx.globalCompositeOperation=源代码结束； var

我需要创建一个不透明刷干净和光滑

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

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

当我将光标移动得更快时，绘制线中的圆圈会更少

您的问题是，在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绘制路径。我不确定“封闭路径”的效果，但内圆消失了。

使用两张画布也有一个巧妙的方法：

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

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

也许您应该仅在释放鼠标按钮时绘制线条。以鼠标向下作为起点，鼠标向上作为终点。我不能，因为我需要实时看到我画的东西。这使一切变得更加复杂。我认为你需要使用双缓冲，然后清除每个鼠标移动上的线，并在下一个位置绘制它。在每次鼠标向下移动时，记录线的起点，保存画布数据，然后在每次鼠标移动时，清除画布，加载以前的画布数据，在起点和实际位置之间绘制一条线，并在鼠标上停止绘制。很抱歉，我还没有时间编写代码，但这就是它的工作原理我认为问题在于如何计算alpha合成：使用此exmaple，您无法实时看到它它就像真实的绘画-您必须猜测，因此笔划更短。您尝试过使用SVG吗？这将允许您在绘图时放置临时点，然后删除它们以放置所需的线。我需要的是光栅图形而不是矢量：svg=矢量，是吗？：/