html5 canvasでラジオに基づく図形を表示

Question

一度に1つの図形を表示したい場合は、 選択したラジオを削除する方法に問題があります。

私は自由ドロー（スケッチのブツ）が、形状のディスプレイだけで大丈夫だよ

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新しいシェイプを描画する前にキャンバスをクリアするためにキャンバスを

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>