← Canvas 重置画布 Canvas 绘图上下文 →

Canvas 橡皮擦 clearRect()

让我们回到 Canvas 重置画布这个动画，每次重新绘制背景感觉不太好，浪费资源

有没有橡皮擦工具呢，这样就能把上次旋转时候画的地方给擦掉，然后重新画那个地方的背景

答案是有的，Canvas 提供了 clearRect() 方法擦除一个矩形区域，把那块区域重新变成背景透明

Canvas clearRect()

ctx.clearRect() 方法设置指定矩形区域内（以点 (x, y) 为起点，范围是 (width, height) ）所有像素变成透明，并擦除之前绘制的所有内容

语法

void ctx.clearRect(x, y, width, height);

参数	说明
x	矩形起点的 x 轴坐标
y	矩形起点的 y 轴坐标
width	矩形的宽度
height	矩形的高度

范例

我们先从 (50,50) 开始绘制一个 200 x 50 且填充黑色的矩形，然后再使用 clearRect() 擦出这个矩形的 1/4

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.fillRect(50,50,200,50);
ctx.clearRect(50,50,200/2,50/2);
</script>

运行结果如下

bingo! 效果完美

范例 2

有了 clearRect() 这个利器，就可以重新编码上一章节中的那个动画了

这次我们变一下，实现秒针效果

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="400" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
var colors = ['#D0021B','#F5A623','#8B572A','#417505','#9013FE','#000000']


function drawBg() {
    for( var j=0; j < 60; j++ ) {
        ctx.fillStyle = "#000";
        ctx.fillRect(75,0,3,2);
        ctx.rotate(6 * Math.PI / 180);        
    }    
}

var i = 0;
function draw() {
    ctx.clearRect(10,0,60,2);
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(10,0,60,2);
    ctx.rotate(6 * Math.PI / 180);
    ctx.fillStyle = colors[i%6];
    ctx.fillRect(10,0,60,2);
    i++;
}

ctx.translate(100,100);
drawBg();
setInterval(function(){draw();},1142);
</script>

比较完美了，但还是有缺陷的，每次秒针经过的区域都会留下一些尾巴没有查处干净

大家知道问题出在哪里吗？

不卖官子了，问题出在 Math.PI / 180 是一个浮点数，导致每次计算结果有偏差

Math.PI/180 = 0.017453292519943295

如果要去掉这些尾巴，那么擦除区域要大一些，比如换成

ctx.clearRect(8,-2,64,6);

把擦除区域的上下左右分别扩展 2

<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-3" width="400" height="300">
</canvas>

<script>
var c3   = document.getElementById("canvas-3");
var ctx3 = c3.getContext("2d");
var colors = ['#D0021B','#F5A623','#8B572A','#417505','#9013FE','#000000']


function drawBg3() {
    for( var j=0; j < 60; j++ ) {
        ctx3.fillStyle = "#000";
        ctx3.fillRect(75,0,3,2);
        ctx3.rotate(6 * Math.PI / 180);        
    }    
}

var i3 = 0;
function draw3() {
    ctx3.clearRect(8,-2,64,6);
    ctx3.fillStyle = "#ffffff";
    ctx3.fillRect(8,-2,64,6);
    ctx3.rotate(6 * Math.PI / 180);
    ctx3.fillStyle = colors[i3%6];
    ctx3.fillRect(10,0,60,2);
    i3++;
}

ctx3.translate(100,100);
drawBg3();
setInterval(function(){draw3();},1142);
</script>

哇，完美

← Canvas 重置画布 Canvas 绘图上下文 →

简单教程

Canvas 橡皮擦 clearRect()

Canvas clearRect()

语法

范例

范例 2

Canvas 基础教程