撤消画布上的选定形状

我想在画布上呈现特定的形状。我已经实现了一个画布，我们可以使用鼠标事件绘制矩形，圆形，线条，椭圆等形状。我创建了一个下拉列表，其中包含我在画布上绘制的所有形状。下拉列表包含像圆形，矩形，平行四边形，椭圆形，圆形等形状... 现在我想要的是，例如，我认为我画了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

撤消画布上的选定形状

回答

相关问题