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

我想一次顯示一個形狀，我很難如何刪除所選的無線電。html5基於無線電的帆布顯示形狀

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>

我很好的免費抽獎（素描啄），只是形狀的顯示...

希望有人能幫助我...我讓我感到困惑的是我從不同渠道獲得的所有這些代碼。預先感謝您..

來源

2017-02-17 Khyana

了'//context.clearRect(0之前添加context.clearRect(0, 0, canvas.width, canvas.height);清除畫布，0，canvas.width，帆布.height）;'在評論中，它解決了你的問題（我認爲...）。這種說法所做的是清除你的畫布（以使它變空）。 – KarelG

@KarelG我沒有評論它，因爲素描/塗鴉部分（標記）它不會出現。 – Khyana

繪製新的形狀

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>

來源

2017-02-17 08:20:39 Arkej

謝謝你...但我試着在這裏運行它，我不能塗鴉已經.. – Khyana

謝謝，但它有很多的錯誤。我真的想根據收音機顯示形狀。同時我可以在形狀上塗鴉。例如。當我選擇圈子 - 我可以在它周圍塗鴉。然後，當我選擇矩形時，該圓圈將消失，但塗鴉將保持不變。 – Khyana

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

回答

相關問題