Javascript HTML5 动态创建 Canvas
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10652513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Dynamically create Canvas
提问by Arjen van Heck
Hi there I have a question about dynamically creating a canvas using javascript.
您好，我有一个关于使用 javascript 动态创建画布的问题。
I create a canvas like this:
我创建了一个这样的画布：
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";
but when I try to locate it, I get a nullvalue:
但是当我尝试定位它时，我得到了一个null值：
cursorLayer = document.getElementById("CursorLayer");
Am I doing it wrong? Is there a better way to create a canvas using JavaScript?
我做错了吗？有没有更好的方法来使用 JavaScript 创建画布？
回答by VisioN
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);回答by Razan Paul
Via Jquery:
通过jQuery：
$('<canvas/>', { id: 'mycanvas', height: 500, width: 200});
回答by goblin01
It happens because you call it before DOM has loaded. Firstly, create the element and add atrributes to it, then after DOM has loaded call it. In your case it should look like that:
发生这种情况是因为您在 DOM 加载之前调用了它。首先，创建元素并为其添加属性，然后在 DOM 加载后调用它。在你的情况下，它应该是这样的：
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";
window.onload = function() {
document.getElementById("CursorLayer");
}
回答by Kamil Kie?czewski
Try
尝试
document.body.innerHTML = "<canvas width=500 height=150 id='CursorLayer'>";
var ctx = CursorLayer.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 50, 50);canvas { border: 1px solid black }回答by Pooja
<html>
<head></head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init() {
sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
window.requestAnimationFrame(draw);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0, 0, 300, 300);
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
ctx.save();
ctx.translate(150, 150);
// Earth
var time = new Date();
ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) *
time.getMilliseconds());
ctx.translate(105, 0);
ctx.fillRect(10, -19, 55, 31);
ctx.drawImage(earth, -12, -12);
// Moon
ctx.save();
ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) *
time.getMilliseconds());
ctx.translate(0, 28.5);
ctx.drawImage(moon, -3.5, -3.5);
ctx.restore();
ctx.restore();
ctx.beginPath();
ctx.arc(150, 150, 105, 0, Math.PI * 2, false);
ctx.stroke();
ctx.drawImage(sun, 0, 0, 300, 300);
window.requestAnimationFrame(draw);
}
init();
</script>
</body>
</html>
