社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 分享用canvas實現水流和水池動畫的程式碼

分享用canvas實現水流和水池動畫的程式碼

零下一度
發布： 2017-05-17 14:28:12
原創
6145 人瀏覽過

利用Html 5的canvas標籤繪製水流和水池動畫

#在利用HTML 5的canvas進行動畫繪製之前，先介紹一下基本知識，包括canvas（如果對canvas比較熟悉的可以直接跳過該節）、oCanvas框架、精靈動畫。在了解了以上的基本知識後，就可以開始利用canvas做動畫了。

canvas標籤簡介

在這部分，東西比較多，比較雜，各個網站上都可以找到相關的簡介，在此我就不造輪子了，菜鳥上的教程就挺不錯的，另外推薦一個相當好的博文玩轉html 5 canvas畫圖,這篇文章介紹的非常詳細，推薦好好看看。

canvas框架oCanvas簡介

canvas標籤功能非常強大，既可以處理圖片，又可以進行像素級的處理，完全可以取代瀏覽器端的flash，但是由於canvas發展還未完善，API還不是太全，元素的事件處理功能等還沒有提供接口，在實現一些複雜功能時，尚需耗費許多精力，於是出現了許多第三方的基於canvas 的框架，這些框架相比於原生的canvas標籤，有了更多簡單易用的API，大大提高了我們編碼的效率，在這裡我選用的是oCanvas框架，相關的使用文檔和demo都可以去上面的鏈接中查看。

精靈動畫簡介

精靈動畫一般由一組自訂的屬性值和3個子函數組成（init、advance、draw）。
三個函數的作用分別如下：
init：初始化精靈動畫的屬性值
advance：再畫下一幀之前先更新下一幀的狀態值
draw：將advance函數中更新的狀態值繪製到畫布中
以上三個函數的執行順序是：init->advance->draw->advance->draw->…..一直循環下去。下面我以一個隨機產生上升氣泡的例子來說明上面的執行過程。 

var constructor_bubble = function (settings, core) {

    return oCanvas.extend({
        core: core,
        shapeType: "rectangular",//下面定义了上面我们提到的三个函数：init(),advance(),draw()//在init中，我们map对象组、一个空的数组和一个代表高度的属性值
        init: function () {
            this.map=[
                {r:2,speed:3},
                {r:3,speed:3},
                {r:4,speed:3},
                {r:5,speed:3},
                {r:6,speed:3},
                {r:7,speed:3},
                {r:8,speed:3},
                {r:9,speed:3},
                {r:10,speed:3}
            ];                this.points=[];                this.height=this.container.height_now;

        },//下面是advance函数，在函数中我们利用if逻辑判断是否添加新的气泡以及进行气泡的位置更新，points数组利用队列的先进先出来存储气泡的 
        advance: function () {
            this.height=this.container.height_now;                if(Math.random()>0.95){                    var new_point={
                        x:this.start.x+this.offset*2*(Math.random()-0.5),
                        y:this.start.y-this.map[0].r,
                        r:this.map[0].r
                    };                    this.points.push(new_point);

                }            if(this.points.length>0){                for(var i=0;i<this.points.length;i++){                    this.points[i].x+=this.offset*2*(Math.random()-0.5);                    this.points[i].y-=3;                    if(this.start.y-this.points[i].y>this.height-this.points[i].r-33){                        this.points.shift();
                    }
                }
            }
        },//draw函数中，利用canvas的圆弧绘制指令，将points数组中存储的气泡依次画出        
        draw: function () {
            var canvas = this.core.canvas;

            canvas.lineJoin = &#39;round&#39;;
            canvas.lineWidth = this.GDwidth;
            canvas.strokeStyle = "#fff";            if(this.points.length>0){                for(var i=0;i<this.points.length;i++){
                    canvas.beginPath();
                    canvas.arc(this.points[i].x,this.points[i].y,5,0,2*Math.PI);
                    canvas.stroke();
                    canvas.closePath();
                }

            }

        }
    }, settings);
};
oCanvas.registerDisplayObject("bubble", constructor_bubble, "init");//下面是在应用中定义和添加上面定义的精灵动画，其中：start数组代表了气泡的产生点，container代表了气泡的存在区域var pp1=canvas.display.bubble({
     start:{x:425,y:566},
     container:SC02,
     width:50,
     offset:1,
     speed:5
 }).add();
登入後複製

水流和水池動畫實現

下面詳細介紹一下，專案中如何實現水流動畫和水池動畫的詳細步驟：

水池動畫的繪製

var constructor_show = function (settings, core) {
    return oCanvas.extend({
        core: core,
        shapeType: "rectangular",//上面四行都是oCanvas框架的结构语法/*下面init()、advance（）、draw()分别是上节中说的动画精灵三元素，第一个用来初始化，第二个用来
更新操作，第三个用来绘制图像/动画在管道对象中，定义了一些属性，包括：x、y、height、width、start、
height_now、full、speed、fill、trail_flag、[trail]。其中x、y分别代表水池参考点相对画布左
上角的位置，height、width是水池的宽高属性，start表征了动画是否开始，height_now代表了水池中水
位的高度，full表征了水池是否填满，speed水池上涨的速度，fill水的颜色，trail_flag表征了该水池
是否是一个标准的矩形，如果不是的话，配合trail属性，指定水池的轮廓*/
       init: function () {     
       //默认动画关闭，水池full为0，当前高度为0
            this.start=0;            this.full=0;            this.height_now=0;
        },
        advance: function () {
        //如果水池未满并且是开启状态，水位未满就更新当前高度，否则将full置为1
           if(this.start==1&&this.full!=1){               if (this.height_now < this.Height) {                   this.height_now += this.speed;
               }               else {                   this.full = 1;
               }
           }
        },
        draw: function () {
            var canvas = this.core.canvas,            //先获得水池的位置
                origin = this.getOrigin(),
                x = this.abs_x - origin.x,
                y = this.abs_y - origin.y;            //开始绘制
            canvas.beginPath();
            canvas.strokeStyle = "#000";            if (this.trail_flag == 1) {            //如果是不规则图形，描出轮廓
                canvas.moveTo(this.trail[0].x_t, this.trail[0].y_t);                for (var i = 1; i < this.trail.length; i++) {
                    canvas.lineTo(this.trail[i].x_t, this.trail[i].y_t);
                }
                canvas.lineTo(this.trail[0].x_t, this.trail[0].y_t);
                canvas.clip();
            }            if (this.fill !== "") {            //设置颜色，绘制矩形水池
                canvas.fillStyle = this.fill;
                canvas.fillRect(x, y + this.Height - this.height_now, this.Width, this.height_now);
            }
            canvas.closePath();
        }
    }, settings);
};//将上面的动画精灵注册进oCanvas的display图形库中oCanvas.registerDisplayObject("SC_show", constructor_show, "init");
登入後複製

管道水流動畫的繪製

在管道水流模型中，定義了以下的屬性：
destination: 目前水流最前端的位置
cells: 管道路徑陣列
deta: 方向斜邊長
deta_x: 方向x邊長
deta_y: 方向y邊長
flag_x: 餘弦值
flag_y:正弦值
cellIndex: 目前繪製邊的index
Speed: 水流速度
GDwidth:水流寬度
LineHeight:水流長度
x_now: 目前繪製點x座標
y_now: 目前繪製點y座標
firstX: 管道第一個點座標x
firstY: 管道第一個點座標y
beginHeight: 第一段水流的起點位置
endHeight: 上一段管道遺留未畫完的水線
legacyHeight: 最前端點在上一個管道留下的長度
paused: 是否開始
fill:水流顏色
full:是否填滿

init函數

//init函数主要完成初始化工作init: function () {
            this.x_now = this.cells[0].x_cell;
            this.y_now = this.cells[0].y_cell;
            this.firstX = this.x_now;
            this.firstY = this.y_now;
            this.endHeight = 0;
            this.beginHeight = 0;
            this.paused=0;
            this.full=0;

            this.cellIndex = 0;
            this.destination.x_d = this.cells[0].x_cell;
            this.destination.y_d = this.cells[0].y_cell;

            this.legacyHeight = -1;
            this.LineHeight=10;
            this.Speed=2*this.LineHeight/20;
        }
登入後複製

advance函數

//advance函数主要实现每次动画的刷新步进操作
 advance: function () {
            if(this.paused==1){
                if (this.cellIndex < this.cells.length - 1) {
                    this.deta_x = this.cells[this.cellIndex + 1].x_cell - this.cells[this.cellIndex].x_cell;
                    this.deta_y = this.cells[this.cellIndex + 1].y_cell - this.cells[this.cellIndex].y_cell;
                    this.deta = Math.sqrt(this.deta_x * this.deta_x + this.deta_y * this.deta_y);
                    this.flag_x = this.deta_x / this.deta;
                    this.flag_y = this.deta_y / this.deta;
                    if (this.legacyHeight >= 0) {
                        this.cellIndex++;
                        if (this.cellIndex < this.cells.length - 1) {
                            this.deta_x = this.cells[this.cellIndex + 1].x_cell - this.cells[this.cellIndex].x_cell;
                            this.deta_y = this.cells[this.cellIndex + 1].y_cell - this.cells[this.cellIndex].y_cell;
                            this.deta = Math.sqrt(this.deta_x * this.deta_x + this.deta_y * this.deta_y);
                            this.flag_x = this.deta_x / this.deta;
                            this.flag_y = this.deta_y / this.deta;
                            this.destination.x_d = this.cells[this.cellIndex].x_cell + this.flag_x * this.legacyHeight;
                            this.destination.y_d = this.cells[this.cellIndex].y_cell + this.flag_y * this.legacyHeight;
                            if (Math.abs(this.destination.x_d - this.cells[this.cellIndex + 1].x_cell) > this.Speed * Math.abs(this.flag_x) || Math.abs(this.destination.y_d - this.cells[this.cellIndex + 1].y_cell) > this.Speed * Math.abs(this.flag_y)) {
                                this.legacyHeight = -1;
                                this.destination.x_d += this.flag_x * this.Speed;
                                this.destination.y_d += this.flag_y * this.Speed;
                            }
                            else {
                                if (this.flag_x == 0) {
                                    this.legacyHeight = this.Speed - Math.abs(this.destination.y_d - this.cells[this.cellIndex + 1].y_cell) / Math.abs(this.flag_y);
                                }
                                else {
                                    this.legacyHeight = this.Speed - Math.abs(this.destination.x_d - this.cells[this.cellIndex + 1].x_cell) / Math.abs(this.flag_x);
                                }
                            }
                        }
                    }
                    else {
                        this.destination.x_d += this.flag_x * this.Speed;
                        this.destination.y_d += this.flag_y * this.Speed;
                        if (Math.abs(this.destination.x_d - this.cells[this.cellIndex + 1].x_cell) >= this.Speed * Math.abs(this.flag_x) && Math.abs(this.destination.y_d - this.cells[this.cellIndex + 1].y_cell) >= this.Speed * Math.abs(this.flag_y)) {
                            this.legacyHeight = -1;
                        }
                        else {
                            if (this.flag_x == 0) {
                                this.legacyHeight = this.Speed - Math.abs(this.destination.y_d - this.cells[this.cellIndex + 1].y_cell) / Math.abs(this.flag_y);
                            }
                            else {
                                this.legacyHeight = this.Speed - Math.abs(this.destination.x_d - this.cells[this.cellIndex + 1].x_cell) / Math.abs(this.flag_x);
                            }

                        }
                    }
                }else{
                    this.full=1;
                }
                this.deta_x = this.cells[1].x_cell - this.cells[0].x_cell;
                this.deta_y = this.cells[1].y_cell - this.cells[0].y_cell;
                this.deta = Math.sqrt(this.deta_x * this.deta_x + this.deta_y * this.deta_y);
                this.flag_x = this.deta_x / this.deta;
                this.flag_y = this.deta_y / this.deta;
                if (this.paused == 1) {
                    if (Math.abs(this.firstX - this.cells[0].x_cell) >= this.LineHeight * Math.abs(this.flag_x) && Math.abs(this.firstY - this.cells[0].y_cell) >= this.LineHeight * Math.abs(this.flag_y)) {
                        this.firstX = this.cells[0].x_cell;
                        this.firstY = this.cells[0].y_cell;
                        this.beginHeight = 0;
                    }
                    else {
                        if (this.beginHeight < this.LineHeight) {
                            if (this.beginHeight + this.Speed >= this.LineHeight) {
                                this.beginHeight = this.LineHeight;
                            }
                            else {
                                this.beginHeight += this.Speed;
                            }
                            this.firstX = this.cells[0].x_cell;
                            this.firstY = this.cells[0].y_cell;
                        }
                        else if (this.beginHeight == this.LineHeight) {
                            this.firstX += this.flag_x * this.Speed;
                            this.firstY += this.flag_y * this.Speed;
                        }
                    }
                }
            }

        }
登入後複製

draw函數

//draw函数在每次advance之后执行，将每次的步进更新重新绘制到画布上
 draw: function () {
            var canvas = this.core.canvas;            this.x_now = this.firstX;            this.y_now = this.firstY;            this.deta_x = this.cells[1].x_cell - this.cells[0].x_cell;            this.deta_y = this.cells[1].y_cell - this.cells[0].y_cell;            this.deta = Math.sqrt(this.deta_x * this.deta_x + this.deta_y * this.deta_y);            var myEnd = false;            this.flag_x = this.deta_x / this.deta;            this.flag_y = this.deta_y / this.deta;

            canvas.beginPath();
            canvas.lineJoin = &#39;round&#39;;
            canvas.lineCap="round";            this.endHeight = 0;
            canvas.lineWidth = this.GDwidth / 4;
            canvas.strokeStyle = this.fill;            if (this.beginHeight > 0) {
                canvas.moveTo(this.x_now, this.y_now);
                canvas.lineTo(this.x_now + this.flag_x * this.beginHeight, this.y_now + this.flag_y * this.beginHeight);
            }            this.x_now += this.flag_x * (this.beginHeight + this.LineHeight);            this.y_now += this.flag_y * (this.beginHeight + this.LineHeight);            for (var i = 1; i <= this.cellIndex; i++) {
                myEnd = false;                this.deta_x = this.cells[i].x_cell - this.cells[i - 1].x_cell;                this.deta_y = this.cells[i].y_cell - this.cells[i - 1].y_cell;                this.deta = Math.sqrt(this.deta_x * this.deta_x + this.deta_y * this.deta_y);                this.flag_x = this.deta_x / this.deta;                this.flag_y = this.deta_y / this.deta;                if (this.endHeight > 0) {
                    canvas.moveTo(this.cells[i - 1].x_cell, this.cells[i - 1].y_cell);
                    canvas.lineTo(this.cells[i - 1].x_cell + this.flag_x * (this.endHeight ), this.cells[i - 1].y_cell + this.flag_y * this.endHeight);                    this.x_now = this.cells[i - 1].x_cell + this.flag_x * (this.LineHeight + this.endHeight);                    this.y_now = this.cells[i - 1].y_cell + this.flag_y * (this.LineHeight + this.endHeight);
                }                if (this.endHeight < 0) {                    this.endHeight = Math.abs(this.endHeight);                    this.x_now = this.cells[i - 1].x_cell + this.flag_x * (this.endHeight);                    this.y_now = this.cells[i - 1].y_cell + this.flag_y * (this.endHeight);
                }                if (this.endHeight == 0 && i != 1) {                    this.x_now = this.cells[i - 1].x_cell;                    this.y_now = this.cells[i - 1].y_cell;
                }                while (Math.abs(this.x_now - this.cells[i].x_cell) >= this.LineHeight * Math.abs(this.flag_x) && Math.abs(this.y_now - this.cells[i].y_cell) >= this.LineHeight * Math.abs(this.flag_y)) {
                    canvas.moveTo(this.x_now, this.y_now);
                    canvas.lineTo(this.x_now + this.flag_x * this.LineHeight, this.y_now + this.flag_y * this.LineHeight);                    this.x_now += this.flag_x * this.LineHeight;                    this.y_now += this.flag_y * this.LineHeight;                    if (Math.abs(this.x_now - this.cells[i].x_cell) <= this.LineHeight * Math.abs(this.flag_x) && Math.abs(this.y_now - this.cells[i].y_cell) <= this.LineHeight * Math.abs(this.flag_y)) {                        if (this.flag_x == 0) {                            this.endHeight = Math.abs(this.y_now - this.cells[i].y_cell) / Math.abs(this.flag_y) - this.LineHeight;
                        }                        else {                            this.endHeight = Math.abs(this.x_now - this.cells[i].x_cell) / Math.abs(this.flag_x) - this.LineHeight;
                        }                        //this.endHeight = (Math.abs(this.y_now - this.cells[i].y_cell) + Math.abs(this.x_now - this.cells[i].x_cell) - this.LineHeight * (Math.abs(this.flag_y) + Math.abs(this.flag_x)))/2;
                        myEnd = true;                        break;
                    }                    else {                        this.x_now += this.flag_x * this.LineHeight;                        this.y_now += this.flag_y * this.LineHeight;
                    }
                }                if (myEnd == false && Math.abs(this.x_now - this.cells[i].x_cell) <= this.LineHeight * Math.abs(this.flag_x) && Math.abs(this.y_now - this.cells[i].y_cell) <= this.LineHeight * Math.abs(this.flag_y)) {
                    canvas.moveTo(this.x_now, this.y_now);
                    canvas.lineTo(this.cells[i].x_cell, this.cells[i].y_cell);                    //this.endHeight = this.LineHeight - Math.abs(this.x_now - this.cells[i].x_cell)*flag.x_flag - Math.abs(this.y_now - this.cells[i].y_cell)*flag.y_flag;
                    if (this.flag_x == 0) {                        this.endHeight = this.LineHeight - Math.abs(this.y_now - this.cells[i].y_cell) / Math.abs(this.flag_y);
                    }                    else {                        this.endHeight = this.LineHeight - Math.abs(this.x_now - this.cells[i].x_cell) / Math.abs(this.flag_x);
                    }                    //this.endHeight = ( this.LineHeight * (Math.abs(this.flag_y) + Math.abs(this.flag_x)) - Math.abs(this.y_now - this.cells[i].y_cell) + Math.abs(this.x_now - this.cells[i].x_cell)) / 2;
                }
            }            if (this.cellIndex < this.cells.length - 1) {

                myEnd = false;                this.deta_x = this.cells[this.cellIndex+1].x_cell-this.destination.x_d;                this.deta_y = this.cells[this.cellIndex+1].y_cell-this.destination.y_d;                this.deta = Math.sqrt(this.deta_x * this.deta_x + this.deta_y * this.deta_y);                if (this.deta > 0) {                    this.flag_x = this.deta_x / this.deta;                    this.flag_y = this.deta_y / this.deta;                    if (this.endHeight > 0) {
                        canvas.moveTo(this.cells[this.cellIndex].x_cell, this.cells[this.cellIndex].y_cell);
                        canvas.lineTo(this.cells[this.cellIndex].x_cell + this.flag_x * (this.endHeight ), this.cells[this.cellIndex].y_cell + this.flag_y * this.endHeight);                        this.x_now = this.cells[this.cellIndex].x_cell + this.flag_x * ( this.endHeight);                        this.y_now = this.cells[this.cellIndex].y_cell + this.flag_y * ( this.endHeight);                        if(Math.abs(this.destination.x_d-this.x_now)>this.LineHeight*Math.abs(this.flag_x)||Math.abs(this.destination.y_d-this.y_now)>this.LineHeight*Math.abs(this.flag_y)){                            this.x_now+=this.LineHeight*this.flag_x;                            this.y_now+=this.LineHeight*this.flag_y;
                        }                        else{                            this.x_now=this.destination.x_d;                            this.y_now=this.destination.y_d;
                        }                    if (this.endHeight < 0) {                        this.endHeight = Math.abs(this.endHeight);                        this.x_now = this.cells[this.cellIndex].x_cell + this.flag_x * (this.endHeight);                        this.y_now = this.cells[this.cellIndex].y_cell + this.flag_y * (this.endHeight);
                    }                    if (this.endHeight == 0 && this.cellIndex > 0) {                        this.x_now = this.cells[this.cellIndex].x_cell;                        this.y_now = this.cells[this.cellIndex].y_cell;
                    }                    if (this.cellIndex == 0) {                        this.x_now = this.firstX;                        this.y_now = this.firstY;                        if (this.beginHeight > 0) {
                            canvas.moveTo(this.x_now, this.y_now);
                            canvas.lineTo(this.x_now + this.flag_x * this.beginHeight, this.y_now + this.flag_y * this.beginHeight);
                        }                        this.x_now += this.flag_x * (this.beginHeight + this.LineHeight);                        this.y_now += this.flag_y * (this.beginHeight + this.LineHeight);
                    }                    while ((Math.abs(this.x_now - this.destination.x_d) >= this.LineHeight * Math.abs(this.flag_x) && Math.abs(this.y_now - this.destination.y_d) >this.LineHeight * Math.abs(this.flag_y))||(Math.abs(this.x_now - this.destination.x_d) > this.LineHeight * Math.abs(this.flag_x) && Math.abs(this.y_now - this.destination.y_d) >=this.LineHeight * Math.abs(this.flag_y))) {
                        canvas.moveTo(this.x_now, this.y_now);
                        canvas.lineTo(this.x_now + this.flag_x * this.LineHeight, this.y_now + this.flag_y * this.LineHeight);                        this.x_now += this.flag_x * this.LineHeight;                        this.y_now += this.flag_y * this.LineHeight;                        if (Math.abs(this.x_now - this.destination.x_d)<= this.LineHeight * Math.abs(this.flag_x)&&Math.abs(this.y_now - this.destination.y_d) <= this.LineHeight * Math.abs(this.flag_y)) {
                            myEnd = true;                            break;
                        }                        else {                            this.x_now += this.flag_x * this.LineHeight;                            this.y_now += this.flag_y * this.LineHeight;
                        }
                    }                    if (myEnd == false && Math.abs(this.x_now - this.destination.x_d) < this.LineHeight * Math.abs(this.flag_x) || Math.abs(this.y_now - this.destination.y_d) < this.LineHeight * Math.abs(this.flag_y)) {
                        canvas.moveTo(this.x_now, this.y_now);
                        canvas.lineTo(this.destination.x_d, this.destination.y_d);
                    }
                }
            }
            canvas.stroke();
            canvas.closePath();
        }
登入後複製

　取水泵房的實例

下面程式碼在定義了一個水池對象，並賦予了對應的屬性值，最後將定義的物件加入ｃａｎｖａｓ畫布中。 

var SC01 = canvas.display.SC_show({        x: 326,        y: 200,
        Width: 181,
        Height: 438,
        height_now: 0,
        trail_flag: 0,
        t: 0,
        fill: color_SC,
        speed:speed_SC,
        full:0,
        start:0
    });canvas.addChild(SC01);
登入後複製

下面的程式碼定義了一個管道對象，並且給了管道對像一些初始值，最後添加到ｃａｎｖａｓ畫布中。 

var GD01 = canvas.display.GD({        x: 0,        y: 0,
        destination: {
            x_d: 0, y_d: 0
        },
        cells: [
            {x_cell: 195, y_cell: 587},
            {x_cell: 335, y_cell: 587}
        ],
        deta: 1,
        deta_x: 1,
        deta_y: 0,
        flag_x: 1,
        flag_y: 0,
        cellIndex: 0,        
        Speed: speed_all,     
        GDwidth: width_all,     
        LineHeight: 10,     
        x_now: 0,      
        y_now: 0,       
        firstX: 0,     
        firstY: 0,      
        beginHeight: 0,    
        endHeight: 0,     
        legacyHeight: 0,
        paused: 1,
        fill:color_GD,
        full:0
    });
 canvas.addChild(GD01);
登入後複製

具體動畫的流程控制如下：

 canvas.setLoop(function () {
        ／／下面６个ａｄｖａｎｃｅ函数实现每一帧中的动画对象的更新操作
        GD01.advance();
        SC01.advance();
        SC02.advance();
        GD02.advance();
        SC03.advance();
        GD03.advance();
        ／／下面几个ｉｆ语句实现动画的流程控制
        if(GD01.full==1){
            SC01.start = 1;
            SC02.start = 1;
        }
        if(SC02.full==1){
            GD02.paused = 1;
        }
        if(GD02.full==1) {
            SC03.start = 1;
            arrow_1.start();
            arrow_2.start();
        }
        if(SC03.full==1) {
            GD03.paused = 1;
        }
        canvas.redraw();　　／／重绘画布
    }).start();　　　　　　　／／循环开始
登入後複製

【相關推薦】

1. 特別推薦：「php程式設計師工具箱」V0.1版本下載

#2. h5canvas實作雪花飄落的特效程式碼

##3. h5 Canvas中Fill 與Stroke文字效果實作實例

以上是分享用canvas實現水流和水池動畫的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
canvas，动画，代码
來源：php.cn
上一篇：HTML5中Viewport的參數介紹以及使用方法 下一篇：h5 Canvas中Fill 與Stroke文字效果實作實例
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
狀態更新在 Android 上的 React-Native 中不起作用 我有一些程式碼，其中有成對的圖像，它們都在可滑動的水平圖庫中。現在，當您單擊兩個圖像的上部時，圖像應該關閉切換，所以我所做的是，我將isImage2Active設為狀態，然後只需切...
來自於 2024-04-06 16:54:10
0
1
410
為什麼省略 0ms sleep 會破壞我的 css 轉換？ 我正在嘗試實現FLIP動畫，看看我是否理解正確。在這個程式碼筆中（請原諒糟糕的程式碼，我只是在亂搞），如果我註解掉睡眠，平滑過渡將不再有效。 div突然改變位置。這很奇怪，因為睡眠...
來自於 2024-04-06 16:29:50
0
2
490
顯示隱藏的側邊面板：選中 我希望在側面板中有一個導航選單，可以透過動畫漢堡選單切換到視圖。我想僅使用CSS創建它，而不使用任何JS。 :checked偽類似乎是可行的方法，但我無法讓它工作。到目前為止我擁有...
來自於 2024-04-06 15:49:33
0
1
319
使用 Live Server 的網站，當我從文件啟動時無法工作 我嘗試了幾種瀏覽器，並且在每種情況下網站都可以與LiveServer正常工作。另一方面，當我使用Firefox/Chrome啟動它時，網站根本不會加載我的style.css，當我使...
來自於 2024-04-06 12:46:18
0
1
403
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板