無法在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

回答

相關問題