Question

我有一个实时的图形的简单代码，我可以轻松地将这个“动画画布”从HTML5（id =“smoothchartshowAnalisys”）复制到 new＆lt; DIV＆gt; （id =“占位符”），
这是我的目标！

而且，我希望它能自动化**！

但是，当我将代码放入$(function()时，我的控制台浏览器的检查器中出现以下错误：

jikken.html：264 Uncaught TypeError：无法读取属性'getContext' 为null

（在此行var context = smoothchartshowAnalisys.getContext('2d');）

请看看这个jsfidle example按钮在这里工作不正常，但是他们没关系......

 <html>
　<meta charset="utf-8">
    <script language="javascript" type="text/javascript" src="./assets/js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="./assets/js/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="./assets/js/jquery.flot.symbol.js"></script>

<body>



<div id="frame01"  class="frame01" >

        <div  id="graph001"  class="graph001" >
            <div id="placeholder" class="flot-base"       style='height:230px;     width: 800px;'>
            </div >
        </div>

        <button onclick="analysis()"      class="btn btn-success" style='position:absolute; left:700px; top:226px; backgroundd:#01DF01; colorr:white'>    <!-- i class="fa fa-forward"></i -->  analysis </button>
        <canvas id="smoothchartshowTimeLine01"      style='position:absolute; left:404px; top: 100px;   border:solid 1px orange;    padding:0px; margin:0px; '   width="800" height="250"></canvas> 

</div>      




<script>
$(function() {
    //  Grid Lines
    function seriesData1GridLines() { 
        if (data1.length > 0)
            data1 = data1.slice(1);

        // Zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data1.length; ++i) {
            res.push([i, data1[i]])
        }
        return res;
    }

    //  Heart beat wave
    function seriesData2HeartBet() {
        if (data2.length > 0)
            data2 = data2.slice(1);
        while (data2.length < totalPoints) {
            // Heart beat wave
                waveHeartBeatNormal();
            totalPointsCtrl++
            if(totalPointsCtrl>50){//784
                totalPointsCtrl=1
            }
        }
        // Zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data2.length; ++i) {
            res.push([i, data2[i]])
        }
        return res;
    }


    //  FLAG  wave
    function seriesData3Flag() { 
        if (data3.length > 0)
            data3 = data3.slice(1);
        if (data3b.length > 0)
            data3b = data3b.slice(1);

            // Zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data3.length; ++i) {
            res.push([i, data3[i], data3b[i],])
        }
        return res;
    }

    var plot = $.plot("#placeholder", [
        {data: seriesData1GridLines()},    
        {data: seriesData2HeartBet(),},
        {data: seriesData3Flag(),},
        ], {
    });


    // the code for copy the image
    //  this one is NOT working !!
        var smoothchartshowAnalisys = document.querySelector('#smoothchartshowAnalisys');
        var smoothchartshowTimeLine01  = document.querySelector('#smoothchartshowTimeLine01');
        var context = smoothchartshowAnalisys.getContext('2d');

        var image = context.getImageData(0, 0, smoothchartshowAnalisys.width, smoothchartshowAnalisys.height);
        smoothchartshowTimeLine01.getContext('2d').putImageData(image, 0, 0);
    //
    //

    function update() {
        plot.setData([
            {data: seriesData1GridLines(),  points: {show: false}, lines: {show: true},},         
            {data: seriesData2HeartBet(),   points: {show: false}, lines: {show: true},},
            {data: seriesData3Flag(),       points: {show: true},  lines: {show: true},}
        ]);
        plot.draw();
        realTime = setTimeout(update, updateInterval);
    }
    update();

});


//
//  copying the image from canvas when press a button
//  this one is working !!
function analysis() {
    var placeholder = document.querySelector('.flot-base');
    var smoothchartshowAnalisys  = document.querySelector('#smoothchartshowAnalisys');
    var context = placeholder.getContext('2d');

    var image = context.getImageData(0, 0, placeholder.width, placeholder.height);
    smoothchartshowAnalisys.getContext('2d').putImageData(image, 0, 0);
}






//
// the waves 
//
function waveHeartBeatNormal() {
// heart beat wave
}


</script>

</body>
</html>*

所以，我的问题是：如何做到＆lt; div>总是最新的？ automaticaly？

感谢

如何使用JavaScript为一个HTML5动画复制一个图像，？

0 个答案: