gpt4 book ai didi

javascript - HTML 忽略 Canvas 的 CSS 标签

转载 作者:太空宇宙 更新时间:2023-11-03 20:44:24 25 4
gpt4 key购买 nike

我正在学习 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com