Html5的画布并没有显示任何内容

时间:2016-10-29 01:24:10

标签: javascript html5 canvas

我正在测试html5的画布,即使我显示矩形,也没有任何东西存在。 可能有什么不对?

我的代码是 canvas.js

var CV = CV || {};
CV.initialize = function()
{
    console.log('start');
    cv = $('#canvas')[0];

    canvas = cv.getContext('2d');
    canvas.strokeRect(10, 10, 100, 150);
    canvas.fillRect(10, 200, 100, 150);
    canvas.clearRect(20, 200, 50, 50);
};

的index.html

<html>
    <head>
        <title>Canvas tutorial</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
        <section id="main">
            <canvas id="canvas" width="600" height="400">
                Hopefull you see this, if not get a real browser
            </canvas>            
        </section>




        <!-- JAVASCRIPT -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="js/canvas.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                Cv.initialize();
            });
        </script>
        <!-- END JAVASCRIPT -->
    </body>
</html>

jsfiddle是here

由于

0 个答案:

没有答案