[英]Cannot clear canvas workspace in HTML 5
Somehow I cannot get it the canvas clear in my canvas tag, it only clear some portion and i have put canvas.witdh and height as the argument. 不知何故,我无法在canvas标记中将canvas清除,它只清除了一部分,并且我将canvas.witdh和height作为参数。 Originally it should clear all of it when a button is clicked and clearGraph() function is triggered and redraw. 最初,当单击按钮并触发clearGraph()函数并重新绘制时,它应该清除所有内容。 Please do help me. 请帮帮我。 You can view it from here. 您可以从这里查看。 http://jsfiddle.net/qH2Lr/1/ http://jsfiddle.net/qH2Lr/1/
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>
You are making many changes to the context such as scale and translate. 您正在对上下文进行许多更改,例如缩放和翻译。
These will affect clearRect()
as well. 这些也会影响clearRect()
。 I would suggest in this case to use the save()
and restore()
methods. 我建议在这种情况下使用save()
和restore()
方法。 save()
stores the current state of the context incl. save()
存储上下文的当前状态 ,包括。 transforms: 转换:
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);
Now you can see it works as intended: 现在您可以看到它按预期工作:
Of course, clearing right after drawing everything is probably not the real intention but to show that it do work (when you eventually need it - put it first in the code if you intend to redraw the graph). 当然,在绘制完所有内容后立即清除并不是真正的意图,而是表明它确实有效(当您最终需要时-如果您打算重绘图形,请先将其放在代码中)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.