红影 发表于 2022-3-8 21:43
奇怪，我明明设定了一直擦到宽度，怎只擦了一半。本地测试可以的呀。
可以一次性擦掉整个画布：
xxx.clearRect(0, 0, div.clientWidth, div.clientHeight);
其中，xxx是画笔句柄，div的画布句柄。后两个参数也可以填入实值。
马黑黑 发表于 2022-3-8 23:21
所谓画布，必须要默认尺寸，这是基本要求吧
那么，这个默认值是多少呢？
红影 发表于 2022-3-9 11:09
那么，这个默认值是多少呢？
我不是说过了么？你也可以用像素尺量一量。
马黑黑 发表于 2022-3-8 23:25
可以一次性擦掉整个画布：
xxx.clearRect(0, 0, div.clientWidth, div.clientHeight);
嗯嗯，这个能全擦掉。但也是从左到右逐渐擦的么？本来想用定时逐渐擦的。
红影 发表于 2022-3-9 11:11
嗯嗯，这个能全擦掉。但也是从左到右逐渐擦的么？本来想用定时逐渐擦的。
擦除方向不可以定义
马黑黑 发表于 2022-3-9 11:09
我不是说过了么？你也可以用像素尺量一量。
量过了，宽是300
高怎么量、像素尺没法转过来啊{:4_173:}
量到了，高度150 原来点上面的数字尺子就可以转过来了{:4_173:}
马黑黑 发表于 2022-3-9 11:14
擦除方向不可以定义
看起来就是纯粹的全擦掉，刚才看到另一个帖子里说，重新定义宽或高，也能把画布上原来的东西都擦掉。
红影 发表于 2022-3-9 12:56
看起来就是纯粹的全擦掉，刚才看到另一个帖子里说，重新定义宽或高，也能把画布上原来的东西都擦掉。
嗯，这是小妙招
红影 发表于 2022-3-9 12:38
量过了，宽是300
高怎么量、像素尺没法转过来啊
哎呀，我们说过么？左键单击尺子是转向，右键单击尺子是退出
红影 发表于 2022-3-9 11:11
嗯嗯，这个能全擦掉。但也是从左到右逐渐擦的么？本来想用定时逐渐擦的。
你想要的不是定时擦除，而是想一点一点擦除。这想法好，要编写一个程序。以下是自上而下擦除，可以修改、添加数据产生不同方向的擦除效果：
<canvas id="mycv" style="border: 1px solid;"></canvas><br><br>
<input id="del" type="button" value=" 慢慢擦除 " />
<script>
var rx = 1; //擦除线像素
var del; //擦除动作句柄
var mycv = document.getElementById("mycv");
var mycvt = mycv.getContext("2d");
//画一个大矩形
mycvt.fillStyle = "tomato";
mycvt.fillRect(10, 10, mycv.width - 20, mycv.height - 20 );
document.getElementById("del").onclick = function(){
del = setInterval(delNow,10);
}
//擦除函数：从上往下擦除
function delNow(){
mycvt.clearRect(0, 0, mycv.width, rx);
rx += 1;
//console.log("rx值：", rx); //按F12→控制台可查看rx值的变化
if(rx >= mycv.height) clearInterval(del);
}
</script>
马黑黑 发表于 2022-3-9 14:04
嗯，这是小妙招
今晚的帖子就是重定义高宽的具体应用吧。
马黑黑 发表于 2022-3-9 14:07
哎呀，我们说过么？左键单击尺子是转向，右键单击尺子是退出
一下子忘记了啊，后来想起来了{:4_189:}
马黑黑 发表于 2022-3-9 14:37
你想要的不是定时擦除，而是想一点一点擦除。这想法好，要编写一个程序。以下是自上而下擦除，可以修改、 ...
<canvas id="mycv" style="border: 1px solid;"></canvas><br><br>
<input id="del" type="button" value=" 慢慢擦除 " />
<script>
var xx = 1; //擦除线像素
var del; //擦除动作句柄
var mycv = document.getElementById("mycv");
var mycvt = mycv.getContext("2d");
//画一个大矩形
mycvt.fillStyle = "tomato";
mycvt.fillRect(0, 0, 700, 200 );
document.getElementById("del").onclick = function(){
del = setInterval(delNow,10);
}
//擦除函数：从上往下擦除
function delNow(){
mycvt.clearRect(0, 0, xx, 200);
xx += 1;
//console.log("rx值：", rx); //按F12→控制台可查看rx值的变化
if(xx >= 700) clearInterval(del);
}
</script>
想试试怎样来回擦完再反向画出来，没试出来{:4_173:}
红影 发表于 2022-3-9 20:35
var xx = 1; //擦除线像素
var del; //擦除动作句柄
var mycv = document.getElementById( ...
自左向右擦除，不错
红影 发表于 2022-3-9 20:29
今晚的帖子就是重定义高宽的具体应用吧。
应该不是吧，我最新的那个小球运动时擦除整个画布
红影 发表于 2022-3-9 20:29
一下子忘记了啊，后来想起来了
原来如此
马黑黑 发表于 2022-3-9 21:01
自左向右擦除，不错
试一下，没画那么大{:4_173:}
马黑黑 发表于 2022-3-9 21:02
应该不是吧，我最新的那个小球运动时擦除整个画布
对呀，就是用重新设定长宽来擦除整个画布。