Question

我试图用下面的代码画在画布里面。 alert（）返回undefined。看起来文档已准备好但画布不是。

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/myscript.js"></script>
        <link type="text/css" rel="stylesheet" href="css/normalize.css" media="screen" />

        <title></title>
    </head>
    <body>
        <canvas id="space" width="1500" height="1500"></canvas>
    </body>
</html>

myscript.js

$(document).ready(function(){
//$(window).load(function() {


    alert($('#space').id); // returns undefined

    dbCanvas = $('#space');
    context = dbCanvas.getContext('2d');
        // IE: {exception} Object doesn't support property or method 'getContext'
        // FF: TypeError: dbCanvas.getContext is not a function

    context.fillStyle = "rgb(200, 0, 0)";
    context.fillRect(10, 10, 55, 50);

});

Answer 1

嗯，jQuery对象中没有id属性。这就是未定义的原因。

alert($('#space').get(0).id); 
alert($('#space').attr("id"));

你需要为画布运行DOM

dbCanvas = $('#space').get(0);
context = dbCanvas.getContext('2d');

HTML5'画布：$（文档）.ready（function（） - NOT READY

1 个答案: