canvas作loading動畫

時間 2019-11-21

標籤 canvas loading 動畫简体版

原文原文鏈接

因爲公司最近項目不是很忙，因此，本身利用閒暇的時間來研究了一陣子的htm5和css3，正巧，公司最近要對之前的項目進行一次統一的升級，而我被告知時，主要是在之前的版本中加入一些頁面動畫。有4人蔘與了動畫特效的編寫，我很幸運本身也被選中。javascript

第一次作動效仍是用css3,內心好激動。雖然本身對css3不是很瞭解，可是，我仍是有信心本身可以勝任此次的任務。接下來近2個月的時間裏，我都在作css3動效，因爲本身只是擅長javascript和JQuery，對css瞭解也不是很熟悉，因此，作css3動畫上仍是很吃力的。中途遇到不少問題，本身也虛心請教了不少同事。（博主忽然發現，我在如今的公司仍是很歷練人的。）通過那短短的近2個月的時間，我對css也有了進一步的瞭解。正好今天是週末，本身整理一下本身用到的知識。順便作了些例子。css

canvas此次沒有用到項目中，而是我業餘的研究。有寫錯的地方，還請高手指點~html

廢話很少說了，直接上效果圖：java

html代碼：css3

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="./loading.js"></script>
</head>
<body>
<div style="border:1px solid red; width:200px;height:400px; margin-left:10px;float:left;">
<canvas id="loading1" style="width:200px;padding:0;margin:0;display:block;">
</canvas>
<canvas id="loading2" style="width:200px;padding:0;margin:0;display:block;">
</canvas>
</div>
<script type="text/javascript">
loading1();
new loading2({"id":"loading2"});
</script>
</body>
</html>

javascript代碼：canvas

function loading1(){
    var canvas = document.getElementById("loading1"),
        ctx = canvas.getContext("2d"),
        w = canvas.width,
        h = canvas.height,
        x = w/2,
        y = h/2,
        radius = 30;
        ctx.fillStyle = "#000";
        ctx.fillRect(0,0,w,h);

        var r = [3,4,4.5,5,6,7];
        var angle = [10,25,45,65,90,120];
        var alpha = [0.25,0.35,0.45,0.65,0.8,1];
        var x1=[],y1=[];
        
        setInterval(function(){
            ctx.fillStyle = "#000";
            ctx.fillRect(0,0,w,h);
            x1 = [];
            y1 = [];
            for(var i = 0; i < r.length; i ++){
                if(angle[i] >= 360) angle[i] = 0;
                ctx.beginPath();
                ctx.font = "1rem sans-serif";
                ctx.fillStyle = "rgba(156,236,255,"+alpha[i]+")";
                x1.push( x + radius*Math.cos(angle[i]*Math.PI/180));
                y1.push( y + radius*Math.sin(angle[i]*Math.PI/180));
                ctx.arc(x1[i],y1[i],r[i],0,2*Math.PI, true);
                ctx.closePath();
                ctx.fill();
                angle[i] += 5;
            }
        },25);
}

function isEmpty(obj){
    var name;
    for(name in obj){
        return false;
    }
    return true;
}

function loading2(arg){
    this.init(arg);
}
loading2.prototype = {
    constructor:loading2,
    init: function (arg) {
        var isConsist = !isEmpty(arg);
        this.block = isConsist ? arg.block ? arg.block : 12 : 12;
        this.height = isConsist ? arg.height ? arg.height : 15 : 15;
        this.width = isConsist ? arg.width ? arg.width : 3 : 3;
        this.time = isConsist ? arg.time ? arg.time : 100 : 100;
        
        this.cvs = document.getElementById(arg.id),
        this.ctx = this.cvs.getContext("2d");
        this.ctx.width = this.height*6;
        this.ctx.height = this.height*6;
        
        this.ctx.translate(this.ctx.width/2, this.ctx.height/2);
        var radius = 2;
        this.view(radius);
    },
    loop: function(alpha){
        this.ctx.rotate(Math.PI*2/this.block);
        this.ctx.beginPath();
        this.ctx.fillStyle = "rgba(0,0,0,"+alpha+")";
        this.ctx.arc(0, this.ctx.width/2-this.height*2,this.width/2, 0 ,Math.PI, true);
        this.ctx.arc(0, this.ctx.width/2-this.height, this.width/2, Math.PI, 0, true);
        this.ctx.closePath();
        this.ctx.fill();
    },
    view: function(radius){
        var that = this;
        this.ctx.rotate(Math.PI*2/this.block);
        for(var i = 1; i <= this.block; i ++){
            this.loop(i/this.block);
        }
        setTimeout(function(){
            that.ctx.clearRect(-that.ctx.width/2, -that.ctx.height/2, that.ctx.width, that.ctx.height);
            radius >= that.block? radius = 1:radius += 1;
            that.view(radius);
        }, that.time);
    
    }
}

整段javascript中，我認爲最難懂的是loop中的代碼，這段代碼也是canvas中的畫圖的重點。css3動畫

首先，canvas對象經過getContext("2d");返回一個context對象。canvas對象全部的畫圖，旋轉，轉變，縮放等功能全是經過context對象實現的。oop

canvas對象有width和height屬性，默認的width、height值爲300px; 可經過context.width,context.height從新設值;動畫

canvas畫矩形：this

context.fillRect(x,y,width,height)設置canvas被填充的矩形，以相canvas中座標點（x,y）爲起點，寬度爲width，高位height的矩形進行填充。在填充矩形前，能夠經過context.fillStyle能夠設置填充的樣式（css）;

canvas畫圓：

context.beginPath(); //起始一條路徑，或重置當前路徑

context.fillStyle;//能夠設置canvas要填充的樣式

context.arc(x,y,radius,startAngle,endAngle,flag); //以canvas內座標點(x,y)爲圓心radius爲半徑,起始弧度爲startAngle，終止弧度爲endAngle，flag爲bool值，當flag值爲true時，表示逆時針旋轉，當flag爲false，表示以順時針旋轉;

context.closePath();

context.fill();//填充當前繪圖路徑;

canvas旋轉rotate：

在loading2中view方法的代碼中，有用到context.rotate()方法，rotate(angle)方法是用來旋轉當前繪圖，接收一個參數，以弧度計，表示旋轉角度;

canvas從新映射畫布(0,0)座標點：

context.translate(x,y)表示將canvas的左上角平移到點(x,y)處;

值得注意的有