从javascript函数创建HTML5画布

这是我的html

<p>
   <canvas id="canvas" width="340" height="460" style="border:1px solid #BBBBBB;"></canvas>
</p>

现在我想从新的javascript函数在相同的位置创建新的画布 像

单击按钮时，应在相同位置创建新画布

---

有什么办法吗？

在这里你可以看到两幅画布相互重叠。 单击第二个后，第一个应消失。但两者都是显而易见的

<script type="text/javascript">
function canvasA(){
var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";
canvas.width = 340;
canvas.height = 460;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);
document.body.appendChild(canvas);
};

function character(){
var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";
canvas.width = 340;
canvas.height = 460;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);
document.body.appendChild(canvas);
 };

</script>
<button onclick="canvasA();">Hello</button>
<button onclick="character();">Hello</button>
</body>

函数canvasA（）{
var canvas=document.createElement（'canvas'）；
canvas.id=“CursorLayer”；
画布宽度=340；
canvas.height=460；
canvas.style.zIndex=8；
canvas.style.position=“绝对”；
canvas.style.border=“1px solid”；
var body=document.getElementsByTagName（“body”）[0]；
body.appendChild（画布）；
cursorLayer=document.getElementById（“cursorLayer”）；
console.log（cursorLayer）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“rgba（255,0,0,0.2）”；
ctx.fillRect（100100200200）；
ctx.fillStyle=“rgba（0,255,0,0.2）”；
ctx.fillRect（150150200200）；
ctx.fillStyle=“rgba（0,0,255,0.2）”；
ctx.fillRect（200,50200200）；
document.body.appendChild（画布）；
};
函数字符（）{
var canvas=document.createElement（'canvas'）；
canvas.id=“CursorLayer”；
画布宽度=340；
canvas.height=460；
canvas.style.zIndex=8；
canvas.style.position=“绝对”；
canvas.style.border=“1px solid”；
var body=document.getElementsByTagName（“body”）[0]；
body.appendChild（画布）；
cursorLayer=document.getElementById（“cursorLayer”）；
console.log（cursorLayer）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“rgba（255,0,0,0.2）”；
ctx.fillRect（100100200200）；
ctx.fillStyle=“rgba（0,255,0,0.2）”；
ctx.fillRect（150150200200）；
ctx.fillStyle=“rgba（0,0,255,0.2）”；
ctx.fillRect（200,50200200）；
document.body.appendChild（画布）；
};
你好
你好

您需要在

onload

事件中使用

.drawImage（）

函数newCanvas（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
img.src=document.getElementById（'inputImg'）.value；
img.onload=函数（）{
canvas.width=this.width；
canvas.height=this.height；
ctx.drawImage（img，0,0）；
}
}

是否在画布的同一位置创建可能的副本？单击后，第一个画布应消失，并应创建新画布。是否要替换画布？单击后，应将旧画布替换为新画布。第一块画布应该消失。

function newCanvas () {
    can.width = X;
    can.height = Y;

    var newCanvas = document.getElementById('canvas');
    var img = new Image();
    img.src = 'xyz.jpg';    
    var ctx = newCanvas.getContext('2d');
}

<script type="text/javascript">
function canvasA(){
var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";
canvas.width = 340;
canvas.height = 460;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);
document.body.appendChild(canvas);
};

function character(){
var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";
canvas.width = 340;
canvas.height = 460;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);
document.body.appendChild(canvas);
 };

</script>
<button onclick="canvasA();">Hello</button>
<button onclick="character();">Hello</button>
</body>