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 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.