我如何清除画布？ [复制]
Posted
技术标签:
【中文标题】我如何清除画布？ [复制]【英文标题】：how do i clear canvas? [duplicate] 【发布时间】：2013-01-31 00:31:25 【问题描述】：我有一个函数可以在触发 if 语句后在画布上绘制一些东西。我想知道如何在从坐标中删除画布后（在 if 语句之外）清除画布，我不知道该怎么做。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function startCanvas()
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var one = c.getContext("2d");
var two = c.getContext("2d");
var three = c.getContext("2d");
var four = c.getContext("2d");
var five = c.getContext("2d");
var clearCanvas = false;
var image = new Image();
var imageone = new Image();
image.onload = function ()
ctx.drawImage(image, 69, 50);
//draw a circle
one.beginPath();
one.arc(180, 90, 10, 0, Math.PI * 2, true);
one.closePath();
one.fill();
two.beginPath();
two.arc(155, 138, 10, 0, Math.PI * 2, true);
two.closePath();
two.fill();
three.beginPath();
three.arc(160, 180, 10, 0, Math.PI * 2, true);
three.closePath();
three.fill();
four.beginPath();
four.arc(257, 210, 10, 0, Math.PI * 2, true);
four.closePath();
four.fill();
five.beginPath();
five.arc(238, 235, 10, 0, Math.PI * 2, true);
five.closePath();
five.fill();
;
image.src = 'denmark.jpg';
c.addEventListener(
'mousemove',
function (e)
if ((e.x >= 170 && e.x <= 190) && (e.y >= 80 && e.y <= 100))
alert('this is a test');
,
false);
c.addEventListener(
'mousemove',
function (e)
if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148))
ctx.font = "30px Arial";
ctx.fillText("Hello World", 400, 20);
ctx.drawImage(imageone, 400, 60);
imageone.src = 'alborg.jpg';
else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148))
ctx.clearRect(0, 0, 400, 60);
,
false);
c.addEventListener(
'mousemove',
function (e)
if ((e.x >= 150 && e.x <= 190) && (e.y >= 170 && e.y <= 190))
alert('also work');
,
false);
c.addEventListener(
'mousemove',
function (e)
if ((e.x >= 247 && e.x <= 290) && (e.y >= 200 && e.y <= 220))
alert('ok');
,
false);
c.addEventListener(
'mousemove',
function (e)
if ((e.x >= 228 && e.x <= 290) && (e.y >= 225 && e.y <= 245))
alert('yes');
,
false);
</script>
</head>
<body onload="startCanvas()">
<canvas id="myCanvas" >Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
【问题讨论】：
【参考方案1】：使用
ctx.clearRect(x, y, canvas_width, canvas_height);
//In your code x=0,y=0, canvas_width=400 and canvas_height=60
而不是
ctx.clearRect(400,60,0,0);
更新：-
试试这个更新...
else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148))
ctx.clearRect(0,0,400,60);
one.clearRect(0,0,400,60);
two.clearRect(0,0,400,60);
three.clearRect(0,0,400,60);
four.clearRect(0,0,400,60);
five.clearRect(0,0,400,60);
更新
c.addEventListener('mousemove',function (e)
if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148))
console.log("Hello");
ctx.clearRect(0, 0, 400, 60);
one.clearRect(0, 0, 400, 60);
two.clearRect(0, 0, 400, 400);
three.clearRect(0, 0, 400, 60);
four.clearRect(0, 0, 400, 60);
five.clearRect(0, 0, 400, 60);
else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148))
console.log("hi");
, false);
【讨论】：
我已经更新了我的代码，添加了四个参数，但它仍然没有删除我设置的图像 使用 ctx.clearRect(00,0,400,60);不是 ctx.clearRect(400,60,0,0); 更新了代码。我尝试它仍然无法正常工作。它删除了我的地图顶部的条带，但没有删除codectx.drawImage(imageone, 400, 60); imageone.src = 'alborg.jpg';code
试试不行
你能提供任何 jsfiddle 链接以便我调试吗？【参考方案2】：
要清除“Hello World”和“alborg.jpg”的画布，请使用：ctx.clearRect(400,0,200,600)
示例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function startCanvas()
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var one = c.getContext("2d");
var two = c.getContext("2d");
var three = c.getContext("2d");
var four = c.getContext("2d");
var five = c.getContext("2d");
var clearCanvas = false;
var image = new Image();
var imageone = new Image();
image.onload = function ()
ctx.drawImage(image, 69, 50);
//draw a circle
one.beginPath();
one.arc(180, 90, 10, 0, Math.PI * 2, true);
one.closePath();
one.fill();
two.beginPath();
two.arc(155, 138, 10, 0, Math.PI * 2, true);
two.closePath();
two.fill();
three.beginPath();
three.arc(160, 180, 10, 0, Math.PI * 2, true);
three.closePath();
three.fill();
four.beginPath();
four.arc(257, 210, 10, 0, Math.PI * 2, true);
four.closePath();
four.fill();
five.beginPath();
five.arc(238, 235, 10, 0, Math.PI * 2, true);
five.closePath();
five.fill();
;
image.src = 'coffee.png';
c.addEventListener('mousemove',
function (e)
if ((e.x >= 170 && e.x <= 190) && (e.y >= 80 && e.y <= 100))
alert('this is a test');
, false);
c.addEventListener('mousemove',
function (e)
if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148))
ctx.font = "30px Arial";
ctx.fillText("Hello World", 400, 20);
ctx.drawImage(imageone, 400, 60);
imageone.src = 'house-icon.png';
else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148))
//
//
// HERE IS THE CHANGE TO MAKE YOUR CODE WORK !!!
//
// Use this to clear only the "Hello World" and "alborg.jpg"
//
//
ctx.clearRect(400,0,200,600);
//
//
//
, false);
c.addEventListener('mousemove',
function (e)
if ((e.x >= 150 && e.x <= 190) && (e.y >= 170 && e.y <= 190))
alert('also work');
, false);
c.addEventListener('mousemove',
function (e)
if ((e.x >= 247 && e.x <= 290) && (e.y >= 200 && e.y <= 220))
alert('ok');
, false);
c.addEventListener('mousemove',
function (e)
if ((e.x >= 228 && e.x <= 290) && (e.y >= 225 && e.y <= 245))
alert('yes');
, false);
</script>
</head>
<body onload="startCanvas()">
<canvas id="myCanvas" ;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
【讨论】：
谢谢你，我整晚都在努力解决这个问题 我不得不做 ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); @elrobis 你真的否决了我的回答，因为它不适合你的不同情况......多么粗鲁！ 实际上我只是删除了我最初的投票，因为我认为下面的答案与项目无关。 ...现在我想起来了，我的桌面鼠标很糟糕，有时左键会卡住。我可能无意中双击了否决票——当时似乎发生了一些奇怪的事情。我并不是要批评您的答案，而是要宣传它下面的答案。无论如何要抵消意想不到的结果？【参考方案3】：clearRect 接受四个参数：x、y、宽度和高度。另外，是ctx 还是context？使用正确的变量。
【讨论】：
它仍然无法正常工作我编辑了我的代码，我尝试删除我的甜点图片。但它仍然存在 “四论”哪一部分不清楚？四。 四个。不是两个，四个！！！ 我已经更新了我的代码，添加了四个 aguurment 没有发生任何事情。 我也给了你论据的顺序...... 更新了代码。我尝试它仍然无法正常工作。它删除了我的地图顶部的条带，但没有删除 ctx.drawImage(imageone, 400, 60); imageone.src = 'alborg.jpg';代码添加了整个代码以上是关于我如何清除画布？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何在不复制的情况下将画布 imageData 传递给 emscripten c++ 程序？