用鼠标在画布上绘制不透明度的线条

Drawing lines with opacity on a canvas with the mouse

本文关键字：不透明度绘制鼠标更新时间：2023-09-26

这里有一个与我的问题非常相似的问题。我之所以发布这篇文章，是因为链接中有一半的问题从未得到回答。我的画线一直都是一致的，但你在画的时候看不到你在做什么。代码是这样的：

canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
    canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
    ctx.stroke();
    ctx.closePath();
}, false);
var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
};

这很有效，只是我看不清自己在画什么。我见过一些人在谈论使用临时画布进行明显的绘制，然后将笔划复制到主画布上，但我还没有看到一个真正有效的例子。

下面是使用kinetic.js:的代码

Html:

<html>
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-16">
    <script src="jquery-2.0.3.js" type="text/javascript"></script>
    <script src="cn.js" type="text/javascript"></script>
    <script src="kinetic.js" type="text/javascript"></script>
    <style>  
  </style>
</head>
<body>
<div id="container"  height="300px" style="width:300px;height:300px;border:3px solid"></div>
</body>
</html>

cn.js:

$(function()
{
    var lineSx,lineSy,lineFx,lineFy;
    var ismouseDown=false;
    var line;
    var layerList=new Array();

    setInterval(function(){// for clearing the temp layer 
        var l=null,topLayer;
        var i=1;
        l=layerList.pop();      
        while(l){
            //console.log(l);
            if(i!=1){
                l.destroy();
                l=null; 
            }
            else{
                topLayer=l;
            }           
            l=layerList.pop();
            i++;
        }
        layerList.push(topLayer);
    },2);
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
      });
      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 300,
        height: 300,
        fill: 'black',        
      });    
    rect.on("mousedown",function(e){
        console.log(e);
        ismouseDown=true;
        lineSx=e.clientX;   
        lineSy=e.clientY;   
    });
    rect.on("mousemove",function(e){
        if(ismouseDown){
            console.log(e);
            var cx=e.clientX;   
            var cy=e.clientY;
            var tempLayer = new Kinetic.Layer();
            //stage.remove(tempLayer);
            line=createLine(lineSx,lineSy,cx,cy);
            tempLayer.add(line);
            stage.add(tempLayer);       
            layerList.push(tempLayer);                      
        }
    });
    rect.on("mouseup",function(e){
        ismouseDown=false;
        console.log(e);
        lineFx=e.clientX;   
        lineFy=e.clientY;
        line=createLine(lineSx,lineSy,lineFx,lineFy);
        layer.add(line);
         stage.add(layer);  
    });
    layer.add(rect);    
    stage.add(layer);

});
function createLine(sx,sy,fx,fy){
    var line = new Kinetic.Line({
        points: [sx,sy,fx,fy],
        stroke: 'white',
        strokeWidth: 3,
        lineCap: 'round',
        lineJoin: 'round'
     });
     return line;
}