基於無線電的html5畫布顯示形狀

Question

我想一次顯示一個形狀，但是在刪除所選收音機時遇到了麻煩。

  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"); }); }); 

 <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> 

我可以隨意畫畫（畫些東西），但只顯示形狀...

希望有人能幫助我...我對從不同來源獲得的所有這些代碼感到困惑。 先感謝您..

Answer 1

添加context.clearRect(0, 0, canvas.width, canvas.height); 在繪制新形狀之前先清除畫布

 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"); }); }); 

 <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>