在畫布上制作不同的圖形html5

Question

我有一個畫布，但是我不知道如何在覆蓋它的同一畫布上創建其他圖形，我有2個按鈕，一個用於放置圖像，然后鏈接它並制作一個圖像，其他用於放置另一個圖像，但位於不同的位置數字。 例如，您具有按鈕“ a”和按鈕“ b”。 按鈕“ a”放置圖像並使圖形鏈接圖像。 現在，您想開始一個新的圖形，使用按鈕“ b”放置一個圖像，當您回到按鈕“ a”時，它必須鏈接按鈕“ b”之前放置的新圖像。 我不知道我的解釋是否正確。 如果您使用一個按鈕或另一個按鈕來使用相同的函數進行繪制，我將嘗試傳遞一個變量進行比較。 變量為nF ， if nF=0 =>按鈕“ a” if nF=1 =>按鈕“ b”

這是我的代碼

    function position(year, mon) { //that function puts the images in the html
    $('#' + year + ' .' + mon).prepend('<img class="black_point" src="./images/circle.png"/>');

}

    function draw(nF) {
    var fN = nF;
    var table = document.getElementById("table");
    var images = table.getElementsByTagName("img");
    var canvas = document.getElementById("miCanvas");
    var ctx = canvas.getContext("2d");
    var x, y; // Remember coordinates

    canvas.width = table.offsetWidth;
    canvas.height = table.offsetHeight;

    function connect(image, index) { //this function link the images
        var tabBcr = table.getBoundingClientRect();
        var imgBcr = image.getBoundingClientRect();
        x = imgBcr.left + (imgBcr.width / 2) - tabBcr.left;
        y = imgBcr.top + (imgBcr.height / 2) - tabBcr.top;

        index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
        ctx.save(); //save the state I think
    }
    // new path here
    ctx.beginPath();

    for (var i = 0; i < images.length; i++) {
        connect(images[i], i); // provide index so we can sep. move/line
    }
 if (fN == 1) {//This doesn't work :(
        ctx.fillStyle = "orange";
        ctx.globalCompositeOperation = "source-over";
        ctx.fill();
        cxt.restore();

    } else {
        // then at the end:
        ctx.fill();
        cxt.restore();

    }

}

Answer 1

由於您問題中的原始說明與您新添加的圖像有很大不同，因此，我提供此代碼作為學習起點，而無需說明：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } window.onresize=function(e){ reOffset(); } ctx.lineWidth=2; var colors=['green','blue','gold','cyan']; var figures=[]; var selectedFigure=-1; var circles=[]; var selectedCircle=-1; var connectors=[]; addFigure(); $('#new').attr('disabled',true); $("#canvas").mousedown(function(e){handleMouseDown(e);}); $('#new').click(function(){ addFigure(); }); ///// functions function addFigure(){ figures.push({ circleCount:0, color:randomColor(), lastCX:0, lastCY:0 }); selectedFigure=figures.length-1; } function addCircle(mx,my){ var figure=figures[selectedFigure]; var circle={ id:circles.length, cx:mx, cy:my, radius:15, figure:selectedFigure, color:figure.color, }; circles.push(circle); if(figure.circleCount>0){ var connector={ figure:selectedFigure, x0:figure.lastCX, y0:figure.lastCY, x1:mx, y1:my, } connectors.push(connector); } figure.lastCX=mx; figure.lastCY=my; figure.circleCount++; selectedCircle=circle.id; $('#new').attr('disabled',false); } function drawAll(){ ctx.clearRect(0,0,cw,ch); for(var i=0;i<connectors.length;i++){ drawConnector(connectors[i]); } for(var i=0;i<circles.length;i++){ drawCircle(circles[i]); } } function drawCircle(circle){ var highlighted=(circle.figure==selectedFigure); ctx.strokeStyle=(highlighted)?'red':'black'; ctx.lineWidth=(circle.id==selectedCircle)?6:2; ctx.beginPath(); ctx.arc(circle.cx,circle.cy,circle.radius,0,Math.PI*2); ctx.closePath(); ctx.fillStyle=circle.color; ctx.fill(); ctx.stroke(); ctx.lineWidth=2; } function drawConnector(connector){ var highlighted=(connector.figure==selectedFigure); ctx.strokeStyle=(highlighted)?'red':'lightgray'; ctx.beginPath(); ctx.moveTo(connector.x0,connector.y0); ctx.lineTo(connector.x1,connector.y1); ctx.stroke(); } function handleMouseDown(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); if(selectedFigure<0){return;} var mouseX=parseInt(e.clientX-offsetX); var mouseY=parseInt(e.clientY-offsetY); var wasCircleClicked=false;; for(var i=0;i<circles.length;i++){ var c=circles[i]; var dx=mouseX-c.cx; var dy=mouseY-c.cy; if(dx*dx+dy*dy<=c.radius*c.radius){ selectedFigure=c.figure; selectedCircle=i; var figure=figures[selectedFigure]; figure.lastCX=c.cx; figure.lastCY=c.cy; wasCircleClicked=true; break; } } if(!wasCircleClicked){ addCircle(mouseX,mouseY); } drawAll(); } function randomColor(){ if(colors.length>0){ var color=colors[0]; colors.splice(0,1); return(color); }else{ return('#'+Math.floor(Math.random()*16777215).toString(16)); } } 

 body{ background-color: white; } #canvas{border:1px solid red; margin:0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>Click on empty area to add a circle to the currently selected figure.<br><br>Click on a circle to select its figure.<br>Selected figures have a red stroke.<br>New circles will be connected to the last-clicked circle.</h4> <button id=new>Add new figure</button><br> <canvas id="canvas" width=400 height=300></canvas> 

這是一個展示不同家庭成員的框架。

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } // vars var selectedFamily=0; var nextFamily=0; var families=[]; // set listeners $("#canvas").mousedown(function(e){handleMouseDown(e);}); $(document).on('change','.fam',function(){ selectedFamily=this.value; $('#focusFamily').text('Click canvas to add person to family#'+selectedFamily); draw(); }); $('#addfamily').click(function(){ addFamily(); }); // add a first family addFamily(); // functions function addFamily(){ families.push({id:nextFamily,people:[]}); var id=nextFamily; var input=$('<input type=radio />'); input.prop({ 'value':nextFamily, 'id':'fam'+nextFamily, 'name':'fams', 'class':'fam', 'checked':'checked', }); var label=$('<label>',{ 'for':'fam'+nextFamily, 'html':'Work on Family#'+nextFamily, }); $('#family').append('<br>').append(input).append(label); selectedFamily=nextFamily; nextFamily++; draw(); } function handleMouseDown(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mx=parseInt(e.clientX-offsetX); my=parseInt(e.clientY-offsetY); families[selectedFamily].people.push({x:mx,y:my}); draw(); } function draw(){ ctx.clearRect(0,0,cw,ch); var people=families[selectedFamily].people; for(var i=0;i<people.length;i++){ var person=people[i]; ctx.beginPath(); ctx.arc(person.x,person.y,15,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.stroke() } } 

 body{ background-color: ivory; } #container{ display:inline-block; vertical-align:top; border:1px solid blue; padding:10px; } #canvas{border:1px solid red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <br> <h4 id=focusFamily>Click canvas to add person to family#0</h4> <canvas id="canvas" width=300 height=300></canvas> <div id=container> <button id=addfamily>Add Family</button> <div id=family></div> </div>