Question

我遇到了代码，我的工作就是在点击按钮时继续添加画布。这个画布也应该有一个圆圈。每当单击一个按钮时，它应该会显示一个新画布，在旧画布旁边显示一个圆圈（前面创建的画布）。请帮忙。这是我的代码创建的两个画布在页面上是默认的，并且应该在单击按钮

时创建新的画布

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillText("Alex", 10, 50);

var d = document.getElementById("myCanvas1");
var ctx1 = d.getContext("2d");
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
ctx1.fillText("Clay", 10, 50);
</script>

<script>

function fun(){
var e = document.getElementById("myCanvas2");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
}
</script>

<br><br>
<button type="button" onclick="fun()">+</button>
</body>
</html>

Answer 1

创建新画布，然后将其附加到var e = document.getElementById("myCanvas2")，而不是body。

var e = document.createElement('canvas') // create new canvas
document.body.appendChild(e) // make it accessible on the DOM

var ctx2 = e.getContext("2d")
// remain the same code ...

您也可以将所有画布放在<div id="canvases"></div>中，以便更好地进行管理。然后onclick监听器将如下代码。

var e = document.createElement('canvas')
var canvasContainer = document.getElementById('canvases')
document.body.appendChild(canvasContainer)

var ctx2 = e.getContext("2d")
// remain the same code ...

Answer 2

好吧，我所做的就是把你的部分代码（用于圆圈），做了你所要求的！在这个JsFiddle（https://jsfiddle.net/jrhvcrtm/）中，当你点击按钮时，你得到一个新的div，其属性与另一个相同，里面有一个圆圈。

只需在您自己的代码中使用它，如果您还没有实现，它就会使用jQuery。这是一个片段：

＆＃13;

var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

$('#button').click(function() {
     var el = $("#test"),  
     newone = el.clone(true);
     el.before(newone);//This line is added just for styling
});

$('#button').click(function() {
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
});

＆＃13;

#test {
  height:100px;
  width:200px;
  border: 3px solid black;
  margin-left: 50px;
  margin-top: 50px;
}
#button {
 height:50px;
  width:50px;
  border: 3px solid black;
  margin-left: 200px;
  margin-top: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="button">
Click
</button>
<canvas id="test" class="test"></canvas>

＆＃13;

每次点击按钮时如何在其中创建带圆圈的画布

2 个答案: