Javascript 如何在每次单击按钮时创建一个包含圆圈的画布
我被一个代码困住了，我的工作就是在点击按钮时继续添加画布。这个画布也应该有一个圆圈。无论何时单击按钮，都会显示一个新画布，在旧画布（先前创建的画布）旁边有一个圆圈。请帮忙。 这是我的密码 创建的两个画布是页面上的默认画布，单击按钮后应创建新画布Javascript 如何在每次单击按钮时创建一个包含圆圈的画布,javascript,html,Javascript,Html,我被一个代码困住了，我的工作就是在点击按钮时继续添加画布。这个画布也应该有一个圆圈。无论何时单击按钮，都会显示一个新画布，在旧画布（先前创建的画布）旁边有一个圆圈。请帮忙。 这是我的密码 创建的两个画布是页面上的默认画布，单击按钮后应创建新画布 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d
<!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>
您的浏览器不支持HTML5画布标记。
您的浏览器不支持HTML5画布标记。
您的浏览器不支持HTML5画布标记。
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.弧（95,50,40,0,2*数学π）；
ctx1.stroke（）；
ctx1.填充文本（“粘土”，10,50）；
函数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（）；
}
+
var e=document.getElementById（“myCanvas2”）正文中
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 ...
您还可以将所有画布放在
中，以实现更好的管理。然后onclick侦听器将如下代码所示
var e = document.createElement('canvas')
var canvasContainer = document.getElementById('canvases')
document.body.appendChild(canvasContainer)
var ctx2 = e.getContext("2d")
// remain the same code ...
好吧，我所做的是，我参与了你的部分代码（用于圆圈），并按照你的要求去做！
在这个JsFiddle（）中，当您单击按钮时，您会得到一个新的div，它的属性与另一个相同，内部有一个圆
只需在您自己的代码中使用它，如果您还没有意识到，它会在其中使用jQuery。
以下是一个片段：
var c=document.getElementById（“测试”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（95,50,40,0,2*Math.PI）；
ctx.stroke（）；
$（“#按钮”）。单击（函数（）{
var el=$（“#测试”），
newone=el.clone（真）；
el.before（newone）；//添加这一行只是为了设置样式
});
$（“#按钮”）。单击（函数（）{
var e=document.getElementById（“测试”）；
var ctx2=e.getContext（“2d”）；
ctx2.beginPath（）；
ctx2.arc（95,50,40,0,2*Math.PI）；
ctx2.stroke（）；
window.alert（）；
});
#测试{
高度：100px；
宽度：200px；
边框：3倍纯黑；
左边距：50像素；
边缘顶部：50px；
}
#钮扣{
高度：50px；
宽度：50px；
边框：3倍纯黑；
左边距：200px；
边缘顶部：50px；
}
点击
您好，请分享您的代码，以便我们查看您已经尝试过的内容。非常感谢：）