如何在 DIV 中添加 html5 画布
How to add a html5 CANVAS within a DIV
我正在使用以下代码生成canvas
。 目前它将画布元素添加到body
,我怎样才能让它添加到名为"divGameStage"的div
中,该除了body
之外,它没有嵌套在任何其他元素中。
编辑:我已经尝试了第一个建议,但没有出现画布,完整代码如下:
<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas');
div = document.getElementByID(id);
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas)
}
</script>
</head>
<body>
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
loadCanvas(divGameStage);
</script>
</body>
</html>
只需尝试此代码,肯定会为您工作:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas');
div = document.getElementById(id);
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas)
}
</script>
</head>
<body>
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
loadCanvas("divGameStage");
</script>
</body>
</html>
请记住一些事项:
- 错误 1 是 loadCanvas("divGameStage"(中缺少引号;
- 错误 2 是语法错误div = document.getElementById(id(;'"..ID(id("在您的代码中。
如果它也不起作用,那么我相信您正在Internet Explorer上对其进行测试(specially < IE9)
如果是这种情况,仅供参考,IE9及以上版本支持画布,没有其他较小版本支持画布
干杯!!!
您只需将其附加到<div>
而不是正文:
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas'),
div = document.getElementById(id);
canvas.id = "canvGameStage";
canvas.width = 1000;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas);
}
/* ... */
loadCanvas("divGameStage");
</script>
很简单:-(
<script type="text/javascript">
function loadCanvas() {
var canvas = document.createElement('canvas');
canvas.id = "canvGameStage";
canvas.width = 1000;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
var div = document.createElement("div");
div.className = "divGameStage";
div.appendChild(canvas);
document.body.appendChild(div)
}
</script>
这里唯一的问题是:
loadCanvas(divGameStage);
用引号括divGameStage
:
loadCanvas("divGameStage");
因为它需要是一个字符串才能通过getElementById
.
相关文章:
- 使用HTML5 localStorage和jQuery添加到收藏夹/书签
- 在HTML5画布上添加按钮和控件
- 如何在html5,Android,Phonegap中添加滚动条
- 将文本工具添加到绘制应用程序HTML5画布
- 如何动态添加 HTML5 视频控件
- 为 HTML5 游戏添加游戏加载程序
- 吸引人 - html5 导出添加了带有播放按钮的第一张幻灯片
- 将图像从文件添加到 HTML5 画布
- 向 html5 画布游戏添加计时器
- 如何在 DIV 中添加 html5 画布
- HTML5画布-添加更多圆形以圆周运动旋转
- 如何将方法添加到Html5画布
- 使用Javascript为HTML5音频添加循环
- 如何在HTML5文档中添加xml
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- Jquery添加HTML5模式
- 动态添加HTML5日期元素iOS Safari
- 添加HTML5画布的效果,以一个以上的图像
- Jquery添加html5视频编程
- 添加HTML5 DATA属性元素存储在Javascript变量