我正在学习 JavaScript 和 HTML 5。
我根本无法在 Canvas 周围设置简单的边框。 html 完全忽略了 css。
这是我的代码:
JavaScript:
function buildCanvas()
{
var w = window.innerWidth / 2;
var h = window.innerHeight / 2;
document.write("<CANVAS WIDTH=" + w + " HEIGHT=" + h + " ID=canvas_1>");
document.write("</CANVAS>");
drawOnCanvas();
}
function drawOnCanvas()
{
var canvas = document.getElementById("canvas_1");
if (canvas.getContext)
{
var canvas_context = canvas.getContext("2d");
canvas_context.font = "84px Ariel";
canvas_context.fillText("Test", 500, 300);
}
}
HTML:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
<TITLE>Canvas Test</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="scripts/external.js"></SCRIPT>
</HEAD>
<BODY onLoad="buildCanvas()">
</BODY>
</HTML>
样式表:
canvas
{
border: 1px solid black;
}
最佳答案
您正在调用 document.write 在 文档加载后(即在 onload 事件期间)。这会将当前文档替换为包含新内容的新文档。简而言之，它会破坏页面，包括样式定义。
试试这个:
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
canvas.id = "canvas_1";
document.body.appendChild(canvas);
关于javascript - HTML 忽略 Canvas 的 CSS 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22866988/