canvas背景

来源:https://www.cnblogs.com/forever-xuehf/archive/2018/05/30/9113772.html
-Advertisement-
Play Games

加入繪製字母 ...


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>canvas字母噴射效果</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000000;
            overflow:hidden;
        }
    </style>
 </head>
 <body>
    <canvas id=canvas></canvas>
    <script>
        
        //頁面命名空間 命名空間就是對象 需要用到this
        var Canvas={};
        Canvas.anim={
            //初始化
            init:function(){
                var canvas=document.getElementById("canvas");
                this.ctx=canvas.getContext("2d");//畫筆，創建2d空間，加this相當於全局變數
                canvas.width=window.innerWidth;
                canvas.height=window.innerHeight;
                this.letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                this.cw=canvas.width;
                this.ch=canvas.height;
                this.particles=[];
            },
            //執行動畫
            render:function(){
                //粒子的屬性
                var particle={
                    //顯示的位置random為隨機數0-1 
                    x:this.cw/2,
                    y:this.ch,
                    character:this.letters[Math.floor(Math.random()*this.letters.length)],
                    //速度值
                    xSpeed: (Math.random()*20)-10,
                    ySpeed: (Math.random()*20)-10
                }
                this.particles.push(particle);
                this.drawParticles();
            },
            //繪製字母
            drawParticles: function(){
                this.fadeCanvas();
                var particleCount=this.particles.length;
                var c=this.ctx;
                for(var i=0;i<particleCount;i++){
                        var particle=this.particles[i];
                    c.font="12px sans-serif";
                    c.fillStyle="#ffffff";
                    c.fillText(particle.character,particle.x,particle.y);
                    particle.x += particle.xSpeed;
                    particle.y += particle.ySpeed;
                    // 駛近Y軸
                    particle.y *= 0.97;
                }
            },
            //清除畫布
            fadeCanvas: function(){
                this.ctx.fillStyle = "rgba(0,0,0,0.5)";
                this.ctx.fillRect(0,0,this.cw,this.ch);
            }
        };
        Canvas.anim.init();
        setInterval(function(){
            Canvas.anim.render();
        },13);
    </script>
 </body>
</html>

 加入繪製字母

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>canvas字母噴射</title>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    #canvas{
        background-color:#000;
    }
</style>
<body>
    <canvas id="canvas"></canvas>
</body>

<script>
    // 頁面命名空間
    var Canvas = {}
    Canvas.anim = {
        // 初始化
        init: function(){
            var canvas = document.getElementById("canvas");
            this.ctx = canvas.getContext("2d");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            this.cw = canvas.width;
            this.ch = canvas.height;
            // 隨機字母
            this.letters = "QWERTYUIOPLKJHGFDSAZXCVBNM";
            // 位置
            this.particles = [];
        },
        // 執行動畫
        rander: function(){
            // 顯示的位置
            var particle = {
                x: this.cw/2,
                y: this.ch,
                // 隨機字母
                character: this.letters[Math.floor(Math.random()*this.letters.length)],
                // 速度值
                xSpeed: (Math.random()*20)-10,
                ySpeed: (Math.random()*20)-10
            }
            this.particles.push(particle);
            this.drawParticles();
        },
        // 繪製字母
        drawParticles: function(){
            this.fadeCanvas();
            var c = this.ctx;
            // 噴射字母
            var particleCount = this.particles.length;
            for(var i=0;i<particleCount;i++){
                var particle = this.particles[i];
                c.font = "12px";
                c.fillStyle = "#ffffff";
                c.fillText(particle.character,particle.x,particle.y);
                particle.x += particle.xSpeed;
                particle.y += particle.ySpeed;
                // 駛近Y軸
                particle.y *= 0.97;
            }
            // 繪製名字
            var fontParticleCount = Font.particles.length;
            for(var i=0;i<fontParticleCount;i++){
                var particle = Font.particles[i];
                c.font = "12px";
                c.fillStyle = "#ff00cc";
                c.fillText(particle.character,particle.x,particle.y);
            }
        },
        // 清除畫布
        fadeCanvas: function(){
            this.ctx.fillStyle = "rgba(0,0,0,0.5)";
            this.ctx.fillRect(0,0,this.cw,this.ch);
        }
    };
    Canvas.anim.init();
    var Font = {
        init: function(){
            this.startX = window.innerWidth/2-150;
            this.startY = window.innerHeight/2-200;
            this.speed = 130; // 速度值
            this.smallSpace = 10; // 字母間隔
            // 字母位置
            this.particles = [];
        },
        // 執行動畫
        rander: function(xPoint, yPoint){
            // 顯示的位置
            var particle = {
                x: xPoint,
                y: yPoint,
                // 隨機字母
                character: "0",
            }
            this.particles.push(particle);
        },
        // 畫I
        draw_i: function(callback){
            var _this = this;
            var width=40,height=100;
            // 畫-
            var draw_1 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    _this.rander(_this.startX+_this.smallSpace*i,_this.startY);
                    if(_this.smallSpace*i >= width){
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            // 畫|
            var draw_2 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    _this.rander(_this.startX+width/2+_this.smallSpace/2,_this.startY+_this.smallSpace*i);
                    if(_this.smallSpace*i >= height){
                        clearInterval(intVal);
                        draw_3();
                    }
                },_this.speed);
            }
            // 畫-
            var draw_3 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    _this.rander(_this.startX+_this.smallSpace*i,_this.startY+height+_this.smallSpace);
                    if(_this.smallSpace*i >= width){
                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        },
        // 畫心形
        draw_v: function(callback){
            var _this = this;
            var v_startX = _this.startX;
            var v_startY = _this.startY;
            var width=80,height=100;
            // 凹度,高
            var concave = 15;
            // 斜邊，寬高
            var hypotenuseWidth = 20;
            var hypotenuseHeight = 100;
            var draw_1 = function(){
                var i = 0;
                _this.rander(v_startX,v_startY+concave);
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var y = concave/(width/2/_this.smallSpace)*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+concave-y);
                    if(_this.smallSpace*i >= width/2){
                        v_startX = v_startX-_this.smallSpace*i;
                        v_startY = v_startY+concave-y;
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            var draw_2 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var y = hypotenuseHeight/_this.smallSpace*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+y);
                    if(_this.smallSpace*i >= hypotenuseWidth){
                        v_startX = v_startX-_this.smallSpace*i;
                        v_startY = v_startY+y;
                        clearInterval(intVal);
                        draw_3();
                    }
                },_this.speed);
            }
            var draw_3 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var x = (width/2+hypotenuseWidth)/_this.smallSpace*i;
                    _this.rander(v_startX+x,v_startY+_this.smallSpace*i);
                    if(_this.smallSpace*i >= height){
                        v_startX = v_startX+x;
                        v_startY = v_startY+_this.smallSpace*i;
                        clearInterval(intVal);
                        draw_4();
                    }
                },_this.speed);
            }
            var draw_4 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var x = (width/2+hypotenuseWidth)/_this.smallSpace*i;
                    _this.rander(v_startX+x,v_startY-_this.smallSpace*i);
                    if(_this.smallSpace*i >= height){
                        v_startX = v_startX+x;
                        v_startY = v_startY-_this.smallSpace*i;
                        clearInterval(intVal);
                        draw_5();
                    }
                },_this.speed);
            }
            var draw_5 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var y = hypotenuseHeight/_this.smallSpace*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY-y);
                    if(_this.smallSpace*i >= hypotenuseWidth){
                        v_startX = v_startX-_this.smallSpace*i;
                        v_startY = v_startY-y;
                        clearInterval(intVal);
                        draw_6();
                    }
                },_this.speed);
            }
            var draw_6 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    // 每次偏移量
                    var y = concave/(width/2/_this.smallSpace)*i;
                    _this.rander(v_startX-_this.smallSpace*i,v_startY+y);
                    if(_this.smallSpace*i >= width/2){
                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        },
        // 畫U
        draw_u: function(callback){
            var _this = this;
            var width=60,height=120;
            // 畫U_|
            var draw_1 = function(){
                var i = 0;
                var intVal = setInterval(function(){
                    i++;
                    _this.rander(_this.startX,_this.startY+_this.smallSpace*i);
                    if(_this.smallSpace*(i+2) >= height){
                        clearInterval(intVal);
                        draw_2();
                    }
                },_this.speed);
            }
            // 畫U_-
            var draw_2 = function(){
                var function1 = function(){
                    var i = 0;
                    // 處理的高度
                    var cHeight = _this.smallSpace*2;
                    var intVal = setInterval(function(){
                        i++;
                        /*
                        * 每次偏移量
                        * _this.smallSpace*2留的高度
                        */ 
                        var y = cHeight/(width/_this.smallSpace)*i;
                        var y_point = _this.startY+(height-cHeight)+y;
                        _this.rander(_this.startX+_this.smallSpace*i,y_point);
                        if(_this.smallSpace*i >= width/2){
                            clearInterval(intVal);
                            function2();
                        }
                    },_this.speed);
                }
                var function2 = function(){
                    var i = 0;
                    var intVal = setInterval(function(){
                        i++;
                        // 處理的高度
                        var cHeight = _this.smallSpace*2;
                        /*
                        * 每次偏移量
                        * _this.smallSpace*2留的高度
                        */ 
                        var y = cHeight/(width/_this.smallSpace)*i;
                        var y_point = _this.startY+(height-_this.smallSpace)-y;
                        _this.rander(_this.startX+width/2+_this.smallSpace*i,y_point);
                        if(_this.smallSpace*i >= width/2){
                            clearInterval(intVal);
                            draw_3();
                        }
                    },_this.speed);
                }
                function1();
            }
            // 畫U_|
            var draw_3 = function(){
                var i = 0;
                // 處理的高度
                var cHeight = _this.smallSpace*2;
                var intVal = setInterval(function(){
                    i++;
                    var y_point = _this.startY+(height-cHeight)-_this.smallSpace*i;
                    _this.rander(_this.startX+width,y_point);
                    if(_this.smallSpace*(i+3) >= height){
                        clearInterval(intVal);
                        callback();
                    }
                },_this.speed);
            }
            draw_1();
        }
    };
    Font.init();
    setInterval(function(){
        Canvas.anim.rander();
    },20);
    //Font.draw_v();
    Font.draw_i(function(){
        Font.startX += 150;
        Font.draw_v(function(){
            Font.startX += 120;
            Font.draw_u(function(){});
        });
    });
</script>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Swift代理的使用
    Swift代理的使用 協議規定了用來實現某一特定功能所必需的方法和屬性。 任意能夠滿足協議要求的類型被稱為遵循(conform)這個協議。 類，結構體或枚舉類型都可以遵循協議，並提供具體實現來完成協議定義的方法和功能。 1、申明代理 // 協議內容 @objc protocol TLSelectVi ...
  • Android中SharedPerforences的簡單使用示例 --Android基礎
    SharedPreferences是Android平臺上一個輕量級的存儲類，用來保存應用的一些常用配置，比如Activity狀態，Activity暫停時，將此activity的狀態保存到SharedPereferences中；當Activity重載，系統回調方法onSaveInstanceState ...
  • Android性能優化系列之APK終極瘦身策略
    第1條：使用一套資源 這是最基本的一條規則，但非常重要。 對於絕大對數APP來說，只需要取一套設計圖就足夠了。鑒於現在解析度的趨勢，建議取720p的資源，放到xhdpi目錄。 相對於多套資源，只使用720P的一套資源，在視覺上差別不大，很多大公司的產品也是如此，但卻能顯著的減少資源占用大小，順便也能 ...
  • RxJS
    Rx,Reactive Extension,源於微軟，火於NetFlix。 線上編輯器jsbin. CDN:https://unpkg.com/rxjs/bundles/rxjs.umd.min.js Rx理解：把任何變化想象成依據事件緯度變化的事件流 一、rxjs改造輸入框 rxjs庫 把inpu ...
  • Rollup處理並打包JS文件項目實例
    關於Rollup rollup是一款用來es6模塊打包代碼的構建工具(支持css和js打包)。當我們使用ES6模塊編寫應用或者庫時，它可以打包成一個單獨文件提供瀏覽器和Node.js來使用。 它的優點有如下： 能組合我們的腳本文件。 移除未使用的代碼(僅僅使用ES6語法中)。 ... ...
  • 點擊頁面愛心效果
    1 2 (function (window, document, undefined) { 3 var hearts = []; 4 window.requestAnimationFrame = (function () { 5 return window.requestAnimationFrame... ...
  • Selenium基本用法以及元素定位
    一、Selenium 簡介 Selenium是ThroughtWorks公司一個強大的開源Web功能測試工具系列，提供一套測試函數，用於支持Web自動化測試。函數非常靈活，能夠完成界面元素定位、視窗跳轉、結果比較。他支持IE、Firefox、Safari、Chrome、Android手機瀏覽器，也支 ...
  • Vue2 輪播圖組件 slide組件
    Vue2原生始輪播圖組件，支持寬度自適應、高度設置、輪播時間設置、左右箭頭按鈕控制，圓點按鈕切換，以及箭頭、圓點按鈕是否顯示。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類