HTML忽略Canvas的CSS标记

Question

HTML忽略Canvas的CSS标记

我正在学习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);
    }
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

样式表:

canvas
{
    border: 1px solid black;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nie*_*sol 5

您在文档加载document.write 后调用(即在onload事件期间).这将使用包含新内容的新文档替换当前文档.简而言之,它会破坏页面,包括样式定义.

试试这个:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，7 月前
查看次数：	67 次
最近记录：	11 年，7 月前