撤消畫布上的選定形狀

我想在畫布上呈現特定的形狀。我已經實現了一個畫布，我們可以使用鼠標事件繪製矩形，圓形，線條，橢圓等形狀。我創建了一個下拉列表，其中包含我在畫布上繪製的所有形狀。下拉列表包含像圓形，矩形，平行四邊形，橢圓形，圓形等形狀... 現在我想要的是，例如，我認爲我畫了2個矩形和2個圓形。當我從下拉列表中選擇圓形形狀並單擊撤消按鈕時，它應該只撤消圓形，如果從下拉列表中選擇矩形形狀並單擊撤消按鈕，它應該只撤消矩形形狀而不是其他形狀我在畫布使用用於撤銷代碼是：撤消畫布上的選定形狀

function cPush() 
{ 
    canvas = document.getElementById("drawingCanvas"); 
    context = canvas.getContext("2d"); 
    cStep++; 
    if (cStep < cPushArray.length) 
    { 
     cPushArray.length = cStep; 
    } 
    cPushArray.push(document.getElementById('drawingCanvas').toDataURL()); 
} 
function cUndo() 
{ 
    canvas = document.getElementById("drawingCanvas"); 
    context = canvas.getContext("2d"); 
    context.clearRect(0,0,canvas.width, canvas.height); 
    if (cStep > 0) 
    { 
     cStep--; 
     var canvasPic = new Image(); 
     canvasPic.src = cPushArray[cStep]; 
     context.drawImage(canvasPic, 0, 0); 
    } 
}

來源

2014-01-17 user3188826

您可以對每個形狀使用多個上下文。 – whncode

對不起但你是什麼意思多種語境 – user3188826

你可以請解釋它與dreif javascript代碼 – user3188826

如何「撤消」（刪除特定的形狀和重繪剩餘形狀）

演示：http://jsfiddle.net/m1erickson/9pTJ2/

創建一個數組保存所有的形狀定義：

var drawings=[];

添加形狀到陣列：

function addShape(shapename,color){ 
     drawings.push({ 
      shape:shapename, 
      color:color 
     }); 
     drawAll(); 
    }

「撤銷」，從數組中刪除一個指定的形狀的所有元素：

function undoShape(shapename){ 
     var i=drawings.length-1; 
     while(i>=0){ 
      if(drawings[i].shape==shapename){ 
       drawings.splice(i,1); 
      } 
      i--; 
     } 
     drawAll(); 
    }

這裏是代碼：

[pro ps to @enhzflep以提示方法]

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    ctx.lineWidth=1; 

    var shapeWidth=30; 
    var shapeHeight=30; 
    var spacer=5; 
    var drawings=[]; 

    function addShape(shapename,color){ 
     drawings.push({ 
      shape:shapename, 
      color:color 
     }); 
     drawAll(); 
    } 

    function undoShape(shapename){ 
     var i=drawings.length-1; 
     while(i>=0){ 
      if(drawings[i].shape==shapename){ 
       drawings.splice(i,1); 
      } 
      i--; 
     } 
     drawAll(); 
    } 

    function drawAll(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     for(var i=0;i<drawings.length;i++){ 
      var drawing=drawings[i]; 
      var x=i*shapeWidth; 
      var y=50; 
      switch(drawing.shape){ 
       case "rectangle": 
        drawRectangle(x,y,drawing.color); 
        break; 
       case "circle": 
        drawCircle(x,y,drawing.color); 
        break; 
      } 
     } 
    } 


    function drawContainer(x,y){ 
     ctx.strokeStyle="lightgray"; 
     ctx.strokeRect(x,y,shapeWidth,shapeHeight); 
    } 

    function drawRectangle(x,y,color){ 
     drawContainer(x,y); 
     ctx.fillStyle=color; 
     ctx.fillRect(x+spacer,y+spacer,shapeWidth-2*spacer,shapeHeight-2*spacer); 
    } 

    function drawCircle(x,y,color){ 
     drawContainer(x,y); 
     ctx.beginPath(); 
     ctx.arc(x+shapeWidth/2,y+shapeHeight/2,shapeWidth/2-spacer,0,Math.PI*2); 
     ctx.closePath(); 
     ctx.fillStyle=color; 
     ctx.fill(); 
    } 

    function randomColor(){ 
     return('#'+Math.floor(Math.random()*16777215).toString(16)); 
    } 

    $("#rect").click(function(){ 
     addShape("rectangle",randomColor()); 
    }); 
    $("#circle").click(function(){ 
     addShape("circle",randomColor()); 
    }); 
    $("#norect").click(function(){ 
     undoShape("rectangle"); 
    }); 
    $("#nocircle").click(function(){ 
     undoShape("circle"); 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="rect">Add Rect</button> 
    <button id="circle">Add Circle</button> 
    <button id="norect">Erase Rects</button> 
    <button id="nocircle">Erase Circles</button> 
    <canvas id="tools" width=300 height=40></canvas><br> 
    <canvas id="erasers" width=300 height=40></canvas><br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-01-17 18:44:09 markE

非常感謝。這對我幫助很大。 – user3188826

撤消畫布上的選定形狀

回答

相關問題