javascript - 根据用户的选择以模式显示 Canvas 图像

Question

我已经有一个工作模板(非模式)，每次用户选择时，绘图和颜色都会显示在 Canvas 中。现在我需要的是，在用户将其提交到我的数据库之前，我想要一个显示摘要表单(已经工作)和 Canvas 图像(我的问题)的模式。就像我只是复制第一个模板中的图像。

我的 Canvas 显示JS，不同的文件:

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

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

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

/*my JS w/c is same file with my HTML: */

$('#review').click(function () {
        $('#shape').html($('input[name="shape_design"]:checked').val());
        $('#color').html($('input[name="color_design"]:checked').val());
        $('#show_canvas').html($('#displaycanvas').val());
    });

<!-- Here's my HTML the first template and the modal: -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
<canvas id="displaycanvas"></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>
</form>

<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" />


<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">Confirm Order</div>
            <div class="modal-body">
                <p> Shape: <span id="shape"></span> </p>
                <p> Color: <span id="color"></span> </p>
                <p> CANVAS: <span id="show_canvas"></span> </p>
                </div>
            <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div>
        </div>
    </div>
</div>

因此，正如您在“审阅按钮”下方的模式部分中看到的那样，我的 Canvas 不会显示。我不知道我需要在这里构建什么样的代码。提前非常感谢您!

Answer 1

HTML

 <!-- Here's my HTML the first template and the modal: -->

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

<form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
    <canvas id="displaycanvas"></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>
</form>

<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" />

<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">Confirm Order</div>
            <div class="modal-body">
                <p> Shape: <span id="shape"></span> </p>
                <p> Color: <span id="color"></span> </p>
                <p> CANVAS: <canvas id="show_canvas"></canvas> </p>
                </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div>
        </div>
    </div>
</div>

JS

$('#review').click(function () {
    $('#shape').html($('input[name="shape_design"]:checked').val());
    $('#color').html($('input[name="color_design"]:checked').val());
    // Get the canvas and contexts
    var canvasSource = document.getElementById('displaycanvas');
    var contextSource = canvasSource.getContext('2d');
    var canvasShow = document.getElementById('show_canvas');
    var contextShow = canvasShow.getContext('2d');
    // Read the data from the first canvas beginning at 0,0 and going to canvas.width, canvas.height
    var image = contextSource.getImageData(0, 0, canvasSource.width, canvasSource.height);
    // "draw" the image data onto the second canvas beginning at 0,0
    contextShow.putImageData(image, 0, 0);
}

HTML5 Canvas Image Data HTML5 Canvas Put Image Data