HTML5 動態創建 Canvas
[英]HTML5 Dynamically create Canvas
問題描述
您好，我有一個關於使用 javascript 動態創建畫布的問題。
我創建了一個這樣的畫布：
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";
但是當我嘗試定位它時，我得到一個null值：
cursorLayer = document.getElementById("CursorLayer");
我做錯了嗎？ 有沒有更好的方法來使用 JavaScript 創建畫布？
5 個解決方案
解決方案1
126 已采納 2012-05-18 12:22:19
問題是您沒有在文檔正文中插入畫布元素。
只需執行以下操作：
document.body.appendChild(canvas);
例子：
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);
解決方案2
1 2015-07-17 00:26:47
通過jQuery：
$('<canvas/>', { id: 'mycanvas', height: 500, width: 200});
解決方案3
1 2018-03-02 16:07:55
發生這種情況是因為您在 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");
}
解決方案4
0 2019-05-29 21:41:32
選擇
使用元素.innerHTML=這在現代瀏覽器中非常快
document.body.innerHTML = "<canvas width=500 height=150 id='CursorLayer'>"; // TEST var ctx = CursorLayer.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(100, 100, 50, 50);
canvas { border: 1px solid black }
解決方案5
-1 2019-11-21 06:54:42
<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>
HTML5 Canvas：使用構造函數創建復雜的 Canvas 形狀
[英]HTML5 Canvas: Using constructor functions to create complex Canvas shapes
如何將使用jquery動態創建的img元素加載到HTML5 canvas中
[英]How to load dynamically created img element with jquery into HTML5 canvas
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.