无法在HTML 5中清除画布工作区5

不知何故，我无法在画布标记中清除画布，只清除某些部分，并且已将canvas.witdh和height作为参数。最初它应该清除所有它，当一个按钮被点击并且clearGraph（）函数被触发并重绘时。请帮助我。您可以从这里查看。 http://jsfiddle.net/qH2Lr/1/ 无法在HTML 5中清除画布工作区5

function init() { 

    // data sets -- set literally or obtain from an ajax call 
    var dataName = [ "You", "Competitors" ]; 
    var dataValue = [ 2600, 4000]; 
     // set these values for your data 
     numSamples = 2; 
     maxVal = 5000; 
     var stepSize = 1000; 
     var colHead = 50; 
     var rowHead = 60; 
     var margin = 10; 
     var header = "Millions" 
     var can = document.getElementById("can"); 
     ctx = can.getContext("2d"); 
     ctx.fillStyle = "black" 
     yScalar = (can.height - colHead - margin)/(maxVal); 
     xScalar = (can.width - rowHead)/(numSamples + 1); 
     ctx.strokeStyle = "rgba(128,128,255, 0.5)"; // light blue line 
     ctx.beginPath(); 
     // print column header 
     ctx.font = "14pt Helvetica" 
     ctx.fillText(header, 0, colHead - margin); 
     // print row header and draw horizontal grid lines 
     ctx.font = "12pt Helvetica" 
     var count = 0; 
     for (scale = maxVal; scale >= 0; scale -= stepSize) { 
      y = colHead + (yScalar * count * stepSize); 
      ctx.fillText(scale, margin,y + margin); 
      ctx.moveTo(rowHead, y) 
      ctx.lineTo(can.width, y) 
      count++; 
     } 
     ctx.stroke(); 
     // label samples ctx.shadowColor = 'rgba(128,128,128, 0.5)'; 
     ctx.shadowOffsetX = 20; 
     ctx.shadowOffsetY = 1; 
     // translate to bottom of graph and scale x,y to match data 
     ctx.translate(0, can.height - margin); 
     ctx.font = "14pt Helvetica"; 
     ctx.textBaseline = "bottom"; 
     for (i = 0; i < 4; i++) { 
      calcY(dataValue[i]); 
      ctx.fillText(dataName[i], xScalar * (i + 1), y - margin); 
     } 
     // set a color and a shadow 
     ctx.fillStyle = "green"; 

     ctx.scale(xScalar, -1 * yScalar); 
     // draw bars 
     for (i = 0; i < 4; i++) { 
      ctx.fillRect(i + 1, 0, 0.5, dataValue[i]); 
     } 

    } 

    function calcY(value) { 
     y = can.height - value * yScalar; 
    } 

    function clearGraph() { 

     var canvas = document.getElementById("can"); 
     var ctx = canvas.getContext("2d"); 

     // Will always clear the right space 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 


    } 
</script>

来源

2014-03-28 Michael

让我看看一些小提琴 – Dinesh

我已更新我的问题。 – Michael

您正在如规模和转换许多变化的背景下。

这些也会影响clearRect()。我建议在这种情况下使用save()和restore()方法。 save()存储上下文的当前状态。转换：

ctx = can.getContext("2d"); 

ctx.save(); // after obtaining the context 

... rest of code ... 

ctx.restore(); // before clearing 
ctx.clearRect(0, 0, can.width, can.height);

现在你可以看到它的工作原理像预期一样：

Modified fiddle

当然，借鉴一切后立即清除可能不是真正的意图，但也表明，它做的工作（当你最终需要它时 - 如果你打算重新绘制图表，首先将它放在代码中）。

来源

2014-03-28 07:10:05 K3N

谢谢!!!你救了我的命!!对不起，我是HTML5的新手。 – Michael

@迈克尔很高兴我能帮忙！我们都需要开始某处:) – K3N

无法在HTML 5中清除画布工作区5

回答

相关问题