Question

我遇到的问题是我想在网页顶部创建一个画布，但总是在底部创建。

var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
canvas.width = 75;
canvas.height = 25;
//canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
canvas.style.display = "inline";
canvas.style.backgroundColor = 'rgba(0,0,0,1)';


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

cursorLayer = document.getElementById("CursorLayer");
var ctx = cursorLayer.getContext("2d");


function daily()
{        
    ctx.fillStyle="#FFFFFF";
    ctx.font="20px Hallo Sans Light";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillText("asdf",1,20);
}
setInterval(daily,1000);

如果您需要查看网页，请在评论中告诉我

Answer 1

你把它定位为绝对的......也许你错过了：

canvas.style.top = 0;

Answer 2

而不是添加到最后的appendChild，请尝试insertBefore：

body.insertBefore(canvas, body.firstChild);

在页面顶部创建画布

2 个答案: