canvas图形没有出来，这是怎么回事啊？

Question

http://www.dreamwire.nl/CleanDream/more.html上面这个网址里的canvas是怎么实现的？我按照查看页面源代码以及firebug找到了如下代码<canvas class="base" width="439" height="200"></canvas>
<canvas class="overlay" width="439" height="200" style="position: absolute; left: 0px; top:0px;"></canvas>但是那个图形没有出来，这是怎么回事啊？

Answer 1

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

Answer 2

http://www.dreamwire.nl/CleanDream/more.html请问这个页面里的canvas图形是怎么画出来的？ 我怎么找不到相关的JS代码？

Answer 3

代码都在这些里面的
    http://www.dreamwire.nl/CleanDream/js/jquery-1.6.2.min.js
    http://www.dreamwire.nl/CleanDream/js/superfish.js
    http://www.dreamwire.nl/CleanDream/js/supersubs.js
    http://www.dreamwire.nl/CleanDream/js/hoverIntent.js
    http://www.dreamwire.nl/CleanDream/js/jquery.flot.js
    http://www.dreamwire.nl/CleanDream/js/jquery.graphtable-0.2.js
    http://www.dreamwire.nl/CleanDream/js/jquery-ui.js
    http://www.dreamwire.nl/CleanDream/js/customInput.jquery.js
    http://www.dreamwire.nl/CleanDream/js/jquery.tablesorter.js
    http://www.dreamwire.nl/CleanDream/js/jquery.tablesorter.pager.js
    http://www.dreamwire.nl/CleanDream/js/jquery.sparkbox-select.js
    http://www.dreamwire.nl/CleanDream/js/jquery.fancybox-1.3.4.js
    http://www.dreamwire.nl/CleanDream/js/jquery.filestyle.mini.js
    http://www.dreamwire.nl/CleanDream/js/date.js
    http://www.dreamwire.nl/CleanDream/js/jquery.datepicker.js
    http://www.dreamwire.nl/CleanDream/js/jquery.treeview.js
    http://www.dreamwire.nl/CleanDream/js/jquery.tipsy.js
    http://www.dreamwire.nl/CleanDream/js/jquery.wysiwyg.js
    http://www.dreamwire.nl/CleanDream/js/plugins/wysiwyg.rmFormat.js
    http://www.dreamwire.nl/CleanDream/js/controls/wysiwyg.image.js
    http://www.dreamwire.nl/CleanDream/js/controls/wysiwyg.link.js
    http://www.dreamwire.nl/CleanDream/js/controls/wysiwyg.table.js
    http://www.dreamwire.nl/CleanDream/js/inline.js

Answer 4

绘图的JS代码在这个jquery.flot.js库里，可以自己研究一下。贴了开始部分的代码如下
        function makeCanvas(skipPositioning, cls) {
            var c = document.createElement('canvas');
            c.className = cls;
            c.width = canvasWidth;
            c.height = canvasHeight;
                    
            if (!skipPositioning)
                $(c).css({ position: 'absolute', left: 0, top: 0 });
                
            $(c).appendTo(placeholder);
                
            if (!c.getContext) // excanvas hack
                c = window.G_vmlCanvasManager.initElement(c);            // used for resetting in case we get replotted
            c.getContext("2d").save();
            
            return c;
        }