← Canvas 斜拉 Canvas 橡皮擦 clearRect() →

Canvas 重置画布

前面几章节我们已经学习了 Canvas 中的几何变换知识，现在我手特别痒，就想用它们来实现一个动画

我们就用旋转 (rotate()) 来实现一个加载动画吧

我们用一个定时器，每隔一定时间 ( 42 豪秒, 24 帧动画 (1000/24 ~= 42)) 就把画布旋转 15 度

<!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 < 24; j++ ) {
        ctx.fillStyle = "#eeeeee";
        ctx.fillRect(0,0,100,20);
        ctx.rotate(15 * Math.PI / 180);        
    }    
}

var i = 0;
function draw() {
    ctx.fillStyle = colors[i%6];
    ctx.fillRect(0,0,100,20);
    ctx.rotate(15 * Math.PI / 180);
    i++;
}

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

哎呀，怎么回事，怎么所有的颜色都绘画出来了，我们本来的意思应该是只有一个颜色在转动的

静下心来想想，也对，每次我们都在同一张画布上画，我们既没有换画布，也没有用橡皮擦干净

要怎么办呢？换画布？

等等，相信大家都粉刷过墙壁吧，每次有点脏了我们就用白石灰重新刷一次，所以，在 Canvas 中也能不能这样呢？

试试看

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

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


function drawBg3() {
    ctx3.fillStyle = "#ffffff";
    ctx3.fillRect(0,0,c3.width,c3.height);
    for( var j3 = 0; j3 < 24; j3 ++ ) {
        ctx3.fillStyle = "#eeeeee";
        ctx3.fillRect(0,0,100,20);
        ctx3.rotate(15 * Math.PI / 180);        
    }    
}

var i3 = 0;
function draw3() {
    drawBg3();
    ctx3.fillStyle = colors[i3%6];
    ctx3.fillRect(0,0,100,20);
    ctx3.rotate(15 * Math.PI / 180);
    i3++;
}

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

上面的代码，每次调用 draw3() 的时候就用白色正方形先铺一个底，然后画上背景，最后画上我们想要的东西

canvas.width & canvas.height

挺简单的，对吧，我们再来看看换画布的实现方式

等...等？真的重新创建一个 <canvas> 元素？

哦，不是，其实，HTML <canvas> 元素有一个非常好的特性，就是你把它的宽高重新赋值一下，它的画布上的东西就被清空了

canvas.width  = canvas.width;
canvas.height = canvas.height;

嗯，其实不用两个，其中一个就可以实现了

我们试试看吧

<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-4" width="400" height="200">
</canvas>
<script>
var c4   = document.getElementById("canvas-4");
var ctx4 = c4.getContext("2d");
var colors = ['#D0021B','#F5A623','#8B572A','#417505','#9013FE','#000000']


function drawBg4() {
    for( var j4 = 0; j4 < 24; j4 ++ ) {
        ctx4.fillStyle = "#eeeeee";
        ctx4.fillRect(0,0,100,20);
        ctx4.rotate(15 * Math.PI / 180);        
    }    
}

var i4 = 0;
function draw4() {

    c4.width = c4.width;
    c4.height = c4.height;
    ctx4.translate(100,100);

    drawBg4();
    ctx4.rotate( (i4 % 24) * 15 * Math.PI / 180);
    ctx4.fillStyle = colors[i4%6];
    ctx4.fillRect(0,0,100,20);
    i4++;
}

setInterval(function(){draw4();},42);
</script>

哇塞，效果特别棒

但这次改动的代码有点多，首先把 <canvas> 重新赋值后，之前所做的所有几何变换全部都失效了，于是每次画的时候就要使用 (i4 % 24) 来确定本次应该旋转多少度

后话

其实，其实，不用这么复杂，想一想，画背景的时候是不是每次只旋转 15度, 而 360/15=24

是一个整数值，也就是说，循环一圈后又回到了原始的地方

所以呢？其实没必要重置画布的宽和高，因为重绘背景的时候会把之前的覆盖掉

<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-5" width="400" height="200">
</canvas>
<script>
var c5   = document.getElementById("canvas-5");
var ctx5 = c5.getContext("2d");
var colors = ['#D0021B','#F5A623','#8B572A','#417505','#9013FE','#000000']


function drawBg5() {
    for( var j5 = 0; j5 < 24; j5 ++ ) {
        ctx5.fillStyle = "#eeeeee";
        ctx5.fillRect(0,0,100,20);
        ctx5.rotate(15 * Math.PI / 180);        
    }    
}

var i5 = 0;
function draw5() {

    drawBg5();
    ctx5.fillStyle = colors[i5%6];
    ctx5.fillRect(0,0,100,20);
    ctx5.rotate(15 * Math.PI / 180);
    i5++;
}

ctx5.translate(100,100);
setInterval(function(){draw5();},42);
</script>

← Canvas 斜拉 Canvas 橡皮擦 clearRect() →

简单教程

Canvas 重置画布

canvas.width & canvas.height

后话

Canvas 基础教程