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基于无线电的帆布显示形状

回答

相关问题