html动态资源,HTML5动态创建画布

PhrogzArjen van Heck提出了一个问题：HTML5 Dynamically create Canvas，或许与您遇到的问题类似。

The problem is that you do not insert your canvas element in the document body.

Just do the following:

document.body.appendChild(canvas);

Example:

var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";

canvas.width = 1224;

canvas.height = 768;

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);

// below is optional

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);

希望本文对你有帮助，欢迎支持JavaScript中文网