HTML5画布：擦除已绘制的图形

马黑黑

红影 发表于 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
高怎么量、像素尺没法转过来啊

红影

量到了，高度150 原来点上面的数字尺子就可以转过来了

红影

马黑黑 发表于 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
哎呀，我们说过么？左键单击尺子是转向，右键单击尺子是退出

一下子忘记了啊，后来想起来了

红影

马黑黑 发表于 2022-3-9 14:37 你想要的不是定时擦除，而是想一点一点擦除。这想法好，要编写一个程序。以下是自上而下擦除，可以修改、 ...

红影

想试试怎样来回擦完再反向画出来，没试出来

马黑黑

红影 发表于 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
自左向右擦除，不错

试一下，没画那么大

红影

马黑黑 发表于 2022-3-9 21:02
应该不是吧，我最新的那个小球运动时擦除整个画布

对呀，就是用重新设定长宽来擦除整个画布。