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

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

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

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