html5画布显示基于广播的形状

Question

我想一次显示一个形状， 我无法删除所选的收音机。

＆＃13;

＆＃13;

 function display() {
    var canvas = document.getElementById('displaycake_sketch');
    context = canvas.getContext('2d');
    //context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();

    if (document.getElementById('color1').checked) {
      context.strokeStyle = "#FF0000";
    } else if (document.getElementById('color2').checked) {
      context.strokeStyle = "#0000FF";
    }
    if (document.getElementById('shape1').checked) {
      context.arc(95, 50, 40, 0, 2 * Math.PI);
      context.stroke();
    }

    if (document.getElementById('shape2').checked) {
      context.rect(50, 27, 50, 100);
      context.stroke();
    }
  }


  $(function() {
    var drawObject = $('#displaycake_sketch').sketch();
    var oldRedraw = drawObject.data('sketch').redraw;
    drawObject.data('sketch').redraw = function() {
      oldRedraw.call(this);
      display();
    }
    $(".tools a").eq(0).attr("style", "color:#fba557");
    $(".tools a").click(function() {
      $(".tools a").removeAttr("style");
      $(this).attr("style", "color:#000");
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

   
<canvas id="displaycake_sketch"></canvas>
<div> <input type="radio" id="shape1" name="shape_design" value="CIRCLE" onchange="display()"/> O 
<input type="radio" id="shape2" name="shape_design" value="RECTANGLE" onchange="display()"/> [] </div>

<div> <input type="radio" id="color1" name="color_design" value="RED" onchange="display()"/> RED  
<input type="radio" id="color2" name="color_design" value="BLUE" onchange="display()"/> BLUE </div>

<div class="tools"> 
<a href="#displaycake_sketch" class="btn btn-primary" data-tool="marker"> Marker</a> 
<a href="#displaycake_sketch" class="btn btn-primary" data-tool="eraser"> Eraser</a>

</div>

＆＃13;

＆＃13;

＆＃13;

我对自由抽奖（草图的东西）很好，但只是形状的显示......

希望有人可以帮助我......我对所有这些来自不同来源的代码感到困惑。提前谢谢..

Answer 1

在绘制新形状之前添加context.clearRect(0, 0, canvas.width, canvas.height);以清除画布

＆＃13;

＆＃13;

function display() {
    var canvas = document.getElementById('displaycake_sketch');
    context = canvas.getContext('2d');
    //context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
  
    if (document.getElementById('color1').checked) {
      context.strokeStyle = "#FF0000";
    } else if (document.getElementById('color2').checked) {
      context.strokeStyle = "#0000FF";
    }
  }
  
function drawShape() {
    var canvas = document.getElementById('displaycake_sketch');
    context = canvas.getContext('2d');
    //context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    
    if (document.getElementById('shape1').checked) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.arc(95, 50, 40, 0, 2 * Math.PI);
      context.stroke();
    }

    if (document.getElementById('shape2').checked) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.rect(50, 27, 50, 100);
      context.stroke();
    }
}

 $(function() {
    var drawObject = $('#displaycake_sketch').sketch();
    var oldRedraw = drawObject.data('sketch').redraw;
    drawObject.data('sketch').redraw = function() {
      oldRedraw.call(this);
    }
    $(".tools a").eq(0).attr("style", "color:#fba557");
    $(".tools a").click(function() {
      $(".tools a").removeAttr("style");
      $(this).attr("style", "color:#000");
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

   
<canvas id="displaycake_sketch"></canvas>
<div> <input type="radio" id="shape1" name="shape_design" value="CIRCLE" onchange="drawShape()"/> O 
<input type="radio" id="shape2" name="shape_design" value="RECTANGLE" onchange="drawShape()"/> [] </div>

<div> <input type="radio" id="color1" name="color_design" value="RED" onchange="display()"/> RED  
<input type="radio" id="color2" name="color_design" value="BLUE" onchange="display()"/> BLUE </div>

<div class="tools"> 
<a href="#displaycake_sketch" class="btn btn-primary" data-tool="marker"> Marker</a> 
<a href="#displaycake_sketch" class="btn btn-primary" data-tool="eraser"> Eraser</a>

</div>

＆＃13;

＆＃13;

＆＃13;