HTML忽略画布的CSS标签

Question

我正在学习JavaScript和HTML 5。

我根本无法在画布周围得到简单的边框。 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;
}

Answer 1

要调用document.write文档加载后（即在onload事件）。 这将用包含您的新内容的新文档替换当前文档。 简而言之，它会破坏页面，包括样式定义。

尝试以下方法：

var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
canvas.id = "canvas_1";
document.body.appendChild(canvas);

HTML忽略画布的CSS标签

问题描述

1 个解决方案

解决方案1
5 已采纳 2014-04-04 15:34:52

HTML忽略画布的CSS标签

问题描述

1 个解决方案

解决方案1 5 已采纳 2014-04-04 15:34:52

解决方案1
5 已采纳 2014-04-04 15:34:52