admin管理员组文章数量:1387346
I have a canvas that is the container for some stuff. Now I want to pletly clear the whole content.
Here my HTML:
<body>
<canvas id="my" width="1800" height="1000" style="border:3px solid"></canvas>
<br>
<input type="button" value="line" onclick="drawline()"/>
<input type="button" value="circle" onclick="drawcircle()"/>
<input type="button" value="reset" onclick="reset()"/>
</body>
Here my Javascript:
var canvas;
var context;
function drawline()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
context.stroke();
}
function drawcircle()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.beginPath();
context.arc(95,50,40,0,2*Math.PI);
context.stroke();
context.closePath();
}
function reset()
{
canvas = document.getElementById("my");
canvas.clearRect(0,0, canvas.width, canvas.height);
}
But the reset button don't work. I'm a beginner and already tried some debugging: He goes into the reset function but crashed at the second line. canvas.width and canvas.height also got the right values - I printed them out to see what's in.
EDIT: Thanks to "Yeldar Kurmangaliyev" - to get the 2d context of the canvas solved a part of the problem. But this kind of drawing in my js file still won't disappear:
function tree()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
for (var i = 0; i <= 1; i++)
{
if (i === 0)
{
context.translate(350, 200);
}
else
{
context.translate(0, 100);
}
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
context.closePath();
context.stroke();
}
}
EDIT2: I found the solution for the second problem. It is the context.translate. I assume, the clear.Rect clears the wrong area in the canvas because the "zero coordinates" were moved to the coordinates that are defined in the translate. Means 0.0 is after the translate 350.200 and then 350.300, 350.400, ...
This is now my working reset function. Thanks to this post:
function reset()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0,0, canvas.width, canvas.height);
}
I have a canvas that is the container for some stuff. Now I want to pletly clear the whole content.
Here my HTML:
<body>
<canvas id="my" width="1800" height="1000" style="border:3px solid"></canvas>
<br>
<input type="button" value="line" onclick="drawline()"/>
<input type="button" value="circle" onclick="drawcircle()"/>
<input type="button" value="reset" onclick="reset()"/>
</body>
Here my Javascript:
var canvas;
var context;
function drawline()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
context.stroke();
}
function drawcircle()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.beginPath();
context.arc(95,50,40,0,2*Math.PI);
context.stroke();
context.closePath();
}
function reset()
{
canvas = document.getElementById("my");
canvas.clearRect(0,0, canvas.width, canvas.height);
}
But the reset button don't work. I'm a beginner and already tried some debugging: He goes into the reset function but crashed at the second line. canvas.width and canvas.height also got the right values - I printed them out to see what's in.
EDIT: Thanks to "Yeldar Kurmangaliyev" - to get the 2d context of the canvas solved a part of the problem. But this kind of drawing in my js file still won't disappear:
function tree()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
for (var i = 0; i <= 1; i++)
{
if (i === 0)
{
context.translate(350, 200);
}
else
{
context.translate(0, 100);
}
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
context.closePath();
context.stroke();
}
}
EDIT2: I found the solution for the second problem. It is the context.translate. I assume, the clear.Rect clears the wrong area in the canvas because the "zero coordinates" were moved to the coordinates that are defined in the translate. Means 0.0 is after the translate 350.200 and then 350.300, 350.400, ...
This is now my working reset function. Thanks to this post:
function reset()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0,0, canvas.width, canvas.height);
}
2 Answers
Reset to default 6You are trying to call clearRect on the result of document.getElementById (DOM element). clearRect is a member of canvas context.
It should be:
function reset()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.clearRect(0,0, canvas.width, canvas.height);
}
Because clearRect takes the context of the canvas and not the canvas itself:
function reset()
{
canvas = document.getElementById("my");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0, canvas.width, canvas.height);
}
本文标签： javascriptClear Canvas doesn39t workStack Overflow
版权声明：本文标题：javascript - Clear Canvas doesn't work - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744518852a2610331.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论