前端筆記之Canvas

来源:https://www.cnblogs.com/rope/archive/2019/04/18/10724189.html
-Advertisement-
Play Games

一、Canvas基本使用 Canvas是HTML5的畫布，Canvas算是“不務正業”的面向對象大總結，將面向對象玩極致。 演算法為王！就是說canvas你不會，但是演算法好，不怕寫業務，不怕代碼量，只要稍微學學API就能出活。 Canvas這裡是HTML5新標簽，直接要了flash的命。 1.1 Ca ...


一、Canvas基本使用

Canvas是HTML5的畫布，Canvas算是“不務正業”的面向對象大總結，將面向對象玩極致。

演算法為王！就是說canvas你不會，但是演算法好，不怕寫業務，不怕代碼量，只要稍微學學API就能出活。

Canvas這裡是HTML5新標簽，直接要了flash的命。

 

1.1 Canvas簡介

MDN的Canvas線上手冊：

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

瞭解：

<canvas>是一個可以使用腳本(通常為JavaScript)來繪製圖形的 HTML 元素.它可以用於繪製圖表、製作圖片構圖或者製作簡單的(以及不那麼簡單的)動畫. 右邊的圖片展示了一些 <canvas> 的實現示例。

歷史：

<canvas> 最早由Apple引入WebKit，用於Mac OS X 的 Dashboard，隨後被各個瀏覽器實現。如今，所有主流的瀏覽器都支持它。

Mozilla 程式從 Gecko 1.8 (Firefox 1.5) 開始支持 <canvas>。它首先是由 Apple 引入的，用於 OS X Dashboard 和 Safari。Internet Explorer 從IE9開始支持<canvas> ，更舊版本的IE可以引入 Google 的 Explorer Canvas 項目中的腳本來獲得<canvas>支持。Chrome和Opera 9+ 也支持 <canvas>。

Canvas相容到IE9。

1.2 Canvas入門

canvas是HTML5中比較特殊的雙標簽，可以在body中放：

<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid #000;}
    </style>
</head>
<body>
    <canvas width="600" height="400"></canvas>
</body>
</html>

不能將width、height在CSS中設置，否則畫布的像素的會被縮放，畫面質量粗糙了。

 

<canvas>元素可以像任何一個普通的圖像一樣（有margin，border，background等等屬性）被設計。然而，這些樣式不會影響在canvas中的實際圖像。

 

畫布沒什麼用，所有操作都要在“上下文”中進行，這裡的上下文是環境的意思，不是面向對象中的this。

<script type="text/javascript">
     //得到畫布標簽
     var canvas = document.querySelector("canvas");
     //使用上下文，得到一個2D的畫布
     var ctx = canvas.getContext("2d");
     //畫畫
     ctx.fillRect(100, 100, 300, 100);
</script>

Canvas的本質就是用js來畫畫，所有的繪畫函數，都是ctx的方法。

 

 

canvas馬上開始面對一堆API：

<script type="text/javascript">
     //得到畫布標簽
     var canvas = document.querySelector("canvas");
     //使用上下文，得到一個2D的畫布
     var ctx = canvas.getContext("2d");
     //繪製矩形
     ctx.fillStyle = "orange"; //先提供一個顏色的筆
     ctx.fillRect(100, 100, 300, 100); //在根據以上顏色填充

     ctx.fillStyle = "green"; //先提供一個顏色的筆
     ctx.fillRect(100, 200, 300, 200); //在根據以上顏色填充
</script>

 

Canvas的坐標系和絕對定位的坐標系是一樣的。

 

二、Canvas繪製形狀

2.1繪製形狀路徑

在Canvas中有兩種東西：

l stroke路徑【筆觸】，也叫描邊，就是形狀的輪廓

l fill填充，就是裡面的顏色

//得到畫布標簽
var canvas = document.querySelector('canvas');
//使用上下文，得到一個2D畫布
var ctx = canvas.getContext("2d");
//畫畫
ctx.beginPath();     //聲明要開始繪製路徑
ctx.moveTo(100,100); //移動到繪製點，將“畫筆”移動到100,100的位置
ctx.lineTo(250,250); //劃線
ctx.lineTo(500,250); //劃線
ctx.lineWidth = 10;  //線的粗細
ctx.strokeStyle = "red"; //線的顏色
ctx.fillStyle = "blue"; //準備填充的顏色
ctx.closePath();     //閉合路徑（自動補全）
ctx.stroke();        //顯示線（繪製線），可以繪製的路徑顯示出來
ctx.fill();          //填充顏色

只有矩形有快捷方法，比如想繪製多邊形，都要用以上這些組合。

 

2.2繪製矩形

ctx.fillRect(x,y,w,h);    //繪製填充矩形
ctx.strokeRect(x,y,w,h);   //繪製路徑矩形

 

繪製調色板：

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
for (var i = 0;i < 6;i++){
   for (var j = 0;j < 6;j++){
       ctx.fillStyle = 'rgba('+ Math.floor(255-42.5 * i) +','+ Math.floor(255-42.5 * j) +', 200)';
       ctx.fillRect(i * 25, j * 25, 25, 25);
   }
}

記住一句話：Canvas是不可逆，繪製的元素一旦上了屏幕，是無法針對它再次操作。

2.3繪製弧度

ctx.arc(圓心x, 圓心y, 半徑, 開始的弧度, 結束的弧度, 是否逆時針);

ctx.beginPath();  //開始繪製路徑
// ctx.arc(100, 100, 60, 0, 6.28, false);
ctx.arc(100, 100, 60, 0, Math.PI * 2, false);
ctx.stroke(); //顯示路徑線

切一個圓，讓切下來的弧邊長等於圓的半徑，此時弧對應的角度是57.3度左右，此時角度是固定的。

 

正方向是正右方

在canvas中所有涉及角度的坐標系有兩點註意的：

l 0弧度的方向是正右方向。

 

弧度的順時針和逆時針：

ctx.arc(100,100,60, 0, 3, false); //繪製圓弧

ctx.arc(100,100,60, 0, 1, true); //繪製圓弧

 

繪製圓形：

ctx.arc(100,100,60, 0, Math.PI * 2, false);
ctx.arc(100,100,60, 0, 6.28, false);
ctx.arc(100, 100, 60, 0, -6.28, true);

註意：x和y坐標是到圓心的位置，而且圓的大小是半徑，後面繪製的形狀會覆蓋前面的形狀。

 

繪製笑臉

<script type="text/javascript">
     var canvas = document.querySelector("canvas");
     var ctx = canvas.getContext("2d");

     //繪製大臉
     ctx.beginPath(); //開始繪製路徑
     ctx.arc(300,200, 160, 0, 6.28, false); //繪製圓弧
     ctx.stroke(); //顯示路徑線
     ctx.fillStyle = "brown";
     ctx.fill();

     //繪製左眼睛
     ctx.beginPath();
     ctx.arc(230,150, 30, 0, 6.28, false);
     ctx.stroke();
     ctx.fillStyle = "orange";
     ctx.fill();

     //繪製右眼睛
     ctx.beginPath();
     ctx.arc(370,150, 30, 0, 6.28, false);
     ctx.stroke();
     ctx.fillStyle = "blue";
     ctx.fill();

     //繪製嘴巴
     ctx.beginPath();
     ctx.arc(300,160, 120, 0.5, 2.6, false);
     ctx.lineWidth = 10;
     ctx.stroke();
</script>
繪製笑臉

三、使用圖片

3.1圖片基本使用

canvas中不可能所有形狀都自己畫，一定是設計師給我們素材，然後使用。

canvas中使用圖片的方法：註意，必須等img完全載入後才能呈遞圖片。

ctx.drawImage();

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
//創建一個img標簽
var image = new Image()
//設置圖片的路徑
image.src = "images/baby1.jpg";
//當圖片成功載入，就畫圖（上屏幕）
image.onload = function(){
   //顯示圖片的API
   ctx.drawImage(image, 100, 100); //表示x和y坐標
}

3.2使用切片

如果2個數字參數，此時表示左上角位置的x和y坐標：

ctx.drawImage(img,100,100);
ctx.drawImage(img圖片對象,畫布X,畫布Y);
如果4個數字參數，此時表示x、y、w、h：
ctx.drawImage(img圖片對象, 畫布X,畫布Y,圖片W,圖片H);
如果8個數字參數，此時表示：
ctx.drawImage(img,切片X,切片Y,切片W,切片H,畫布X,畫布Y,圖片W,圖片H);
//創建一個img標簽
var image = new Image()
//設置圖片的路徑
image.src = "images/baby1.jpg";
//當圖片成功載入，就畫圖（上屏幕）
image.onload = function(){
   //顯示圖片的API
   // ctx.drawImage(image, 100, 100); //表示x和y坐標
   // ctx.drawImage(image, 100, 100, 150, 150); //表示x和y坐標
   // ctx.drawImage(img,切片X,切片Y,切片W,切片H,畫布X,畫布Y,圖片W,圖片H);
   ctx.drawImage(image, 108, 200, 145, 120, 100, 100, 145, 120);
}

圖片API：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images

 

3.3簡易的圖片載入器

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
var R = {
   "0":"images/d1.jpg",
   "1":"images/d2.jpg",
   "2":"images/d3.jpg"
}
var arr = [];
for(var k in R){
   arr[k] = new Image(); //創建img對象
   arr[k].src = R[k];    //設置圖片地址
   // 當圖片成功載入，就畫圖（上屏幕）
   arr[k].onload = function(){
       ctx.drawImage(arr[k], 50, 50)
   }
}

3.4顯示GIF動態圖

 HTML代碼：

<img id="testImg" src="xxx.gif" width="224" height="126">
<p><input type="button" id="testBtn" value="停止"></p>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
        if (this.storeCanvas) {
            // 移除存儲的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度還原
            image.style.opacity = '';
        }
        if (this.storeUrl) {
            this.src = this.storeUrl;    
        }
    };
    HTMLImageElement.prototype.stop = function() {
        var canvas = document.createElement('canvas');
        // 尺寸
        var width = this.width, height = this.height;
        if (width && height) {
            // 存儲之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 繪製圖片幀（第一幀）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置當前圖片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 載入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入圖片
                this.parentElement.insertBefore(canvas, this);
                // 隱藏原圖
                this.style.opacity = '0';
                // 存儲canvas
                this.storeCanvas = canvas;
            }
        }
    };
}

var image = document.getElementById("testImg"), 
    button = document.getElementById("testBtn");
    
if (image && button) {
    button.onclick = function() {
        if (this.value == '停止') {
            image.stop();
            this.value = '播放';
        } else {
            image.play();
            this.value = '停止';
        }
    };
}
JavaScript代碼

3.5游戲圖片資源載入器

//得到畫布
var canvas = document.querySelector("canvas");
// 使用上下文，得到一個2D的畫布
var ctx = canvas.getContext("2d");
//資源文件
var R = {
   "d1" : "images/d1.jpg",
   "d2" : "images/d2.jpg",
   "d3" : "images/d3.jpg"
}
//遍歷這個對象，將他們的地址變為真實圖片地址
var count = 0; //已成功載入的圖片個數
var length = Object.keys(R).length; //所有圖片的總數
for(var k in R){
   //創建image對象
   var image = new Image();
   //設置src圖片路徑
   image.src = R[k];
   //將R裡面的資源文件，變為真正的圖片對象
   R[k] = image;
   //當image載入成功後，顯示圖片在畫布上
   image.onload = function(){
       count++; //當某張圖片載入成功，給計數器+1
       ctx.clearRect(0,0,600,600)
       //繪製文本，提升用戶體驗，提示載入的進度
       //填充文字API
       ctx.textAlign = "center";
       ctx.font = "30px 微軟雅黑";
       ctx.fillText("正在載入圖片：" + count + "/" + length, canvas.width / 2,50)
       //當載入完畢，開始游戲
       if(count == length){
           //開始游戲的回調函數
           ctx.clearRect(0,0,600,600)
           start();
       }
   }
}
// 開始游戲的函數
function start(){
   ctx.drawImage(R["d1"],100,100);
   ctx.drawImage(R["d2"],0,100);
   ctx.drawImage(R["d3"],300,200);
}
游戲圖片載入器

四、畫布的變形

4.1 translate移動變形

translate()移動畫布，rotate()旋轉畫布。

canvas中不能只移動某一個對象，移動的都是整個畫布。

canvas中不能只旋轉某一個對象，旋轉的都是整個畫布。

但是可以用save()、restore()來巧妙設置，實現讓某一個元素進行移動和旋轉。

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
ctx.translate(100, 100); //將畫布移動，坐標系就發生變化了
ctx.fillRect(100, 100, 100, 100); //相對於移動後的坐標系開始畫畫

 

移動變形、移動的是整個畫布、而不是某個元素，在ctx.translate()之後繪製的語句都將被影響。

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
ctx.translate(100, 100); //將畫布移動，坐標系就發生變化了
ctx.fillRect(100, 100, 100, 100); //相對於移動後的坐標系開始畫畫
ctx.beginPath();
ctx.arc(100,100, 100, 0, 6.28, false);
ctx.fillStyle = 'skyblue';
ctx.fill();

4.2 save()保存和restore()恢復

ctx.save()表示保存上下文的物理性質，ctx.restore()表示恢復最近一次的保存。

save表示保存sava函數之前的狀態，restore表示獲取save保存的狀態。

移動了的元素，會影響不需要移動圓點坐標的元素，所以可以使用以上兩個方法保存起來，可以解決讓某一個元素移動變形不受影響。

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");

ctx.save();
ctx.translate(100, 100); //將畫布移動，坐標系就發生變化了
ctx.fillRect(100, 100, 100, 100); //相對於移動後的坐標系開始畫畫
ctx.restore();

ctx.beginPath();
ctx.arc(100,100, 100, 0, 6.28, false);
ctx.fillStyle = 'skyblue';
ctx.fill();

4.3 rotate()旋轉變形

旋轉的是整個坐標系，坐標系以0,0點為中心點進行旋轉。

rotate(1)的參數，是弧度，旋轉的也不是矩形，而是畫布。

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.rotate(1); //1表示57.3度（1弧度）
ctx.fillRect(100, 100, 100, 100); //相對於旋轉後的坐標系開始畫畫

 

如果想旋轉某一個元素，必須將坐標軸原點，放到要旋轉的元素身上，然後再旋轉。

ctx.save();
ctx.translate(150,150)
ctx.rotate(1); //1表示57.3度（1弧度）
ctx.fillRect(-50, -50, 100, 100); //相對於旋轉後的坐標系開始畫畫
ctx.restore();

坐標系移動到物體的中心點，物體以負半寬、半高、為x，y繪製。

function Box(){
    this.x = 150;
    this.y = 150;
    this.w = 100;
    this.h = 100;
    this.deg = 0;
}
Box.prototype.render = function(){
    ctx.save()
    ctx.translate(this.x,this.y)
    ctx.rotate(this.deg); 
    ctx.fillRect(-this.w / 2,-this.h / 2,this.w,this.h);
    ctx.restore()
}
Box.prototype.update = function(){
    this.deg += 0.2;
}
var b = new Box();
b.render();
setInterval(function(){
    ctx.clearRect(0,0,600,400)
    b.update();
    b.render();
},20);

globalCompositeOperation

用來設置新圖像和老圖形如何“融合”、“裁剪”。

值有以下這些：

新圖形是：source，老圖形是destination

ctx.globalCompositeOperation="destination-over";

五、FlappyBird游戲

5.1游戲結構

游戲採用中介者模式開發，Game類統領全局，負責讀取資源、設置定時器、維護各種演員的實例，也就是說所有的演員都是Game類new出來，當做一個子屬性。

也就是，游戲項目外部就一條語句：

var game = new Game();

其他的所有語句都寫在Game類裡面。

 

需要的類：

Game類：         中介者，讀取資源、設置定時器、維護各種演員的實例
Bird類：         小鳥類，這個類是單例的，實例化一次
Pipe類：         管子類
Land類：         大地類
background類：   背景類
<body>
    <canvas width="414" height="650"></canvas>
</body>
<script type="text/javascript" src="js/lib/underscore-min.js"></script>
<script type="text/javascript" src="js/Game.js"></script>
<script type="text/javascript" src="js/Bird.js"></script>
<script type="text/javascript" src="js/Land.js"></script>
<script type="text/javascript" src="js/Pipe.js"></script>
<script type="text/javascript" src="js/Background.js"></script>

5.2創建Game類：開始界面、載入資源

(function(){
    window.Game = function() {
        this.f = 0; //幀編號
        this.init();//初始化DOM
    }

    Game.prototype.init = function() {
        this.canvas = document.getElementById("canvas");
        this.ctx = this.canvas.getContext("2d");
        //R對象表示資源文件，圖片總數
        this.R = {
            "bg_day": "images/bg_day.png",
            "land": "images/land.png",
            "pipe_down": "images/pipe_down.png",
            "pipe_up": "images/pipe_up.png",
            "bird0_0": "images/bird0_0.png",
            "bird0_1": "images/bird0_1.png",
            "bird0_2": "images/bird0_2.png",
        }

        var self = this;
        //遍歷對象用for in語句
        //遍歷這個對象，將它們變為真的圖片地址
        var count = 0; //計算載入好的圖片總數（成功載入一張就+1）
        var length = Object.keys(this.R).length; //得到圖片的總數
        for (var k in this.R) {
            //創建一個img標簽，發出圖片的請求，目前img對象是孤兒節點
            var img = new Image();
            //將這個R[k]對象賦值給src設置圖片的路徑
            img.src = this.R[k];
            //將R裡面的資源文件，改為img真的圖片對象
            this.R[k] = img;
            //當圖片載入完畢，就畫圖上畫布（圖片必須load才能上畫布）
            img.onload = function () {
                count++; //當某張圖片載入完畢，給計數器+1
                //清屏
                self.clear()
                //繪製文本，提升用戶載入到什麼程度了

                //save和restore方法配合使用，防止污染其他樣式
                self.ctx.save(); //保存狀態
                self.ctx.textAlign = "center";
                self.ctx.font = "18px 微軟雅黑";
                self.ctx.fillStyle = "blue";
                //填充文字
                self.ctx.fillText(`載入中 ${count} / ${length}`, self.canvas.width / 2, 100);
                self.ctx.restore(); //恢復保存的狀態
                //當載入完畢的圖片總數==圖片總數時，此時就開始載入圖片並開始游戲
                if (count == length) {
                    self.start(); //開始游戲的回調函數
                }
            }
        }
    }
    //清屏
    Game.prototype.clear = function() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    }
    // 游戲主迴圈
    Game.prototype.start = function () {
        var self = this;
        this.timer = setInterval(function(){
            self.f++;
            // 清屏
            self.clear();
            //顯示幀率
            self.ctx.font = "16px 微軟雅黑";
            self.ctx.fillText(self.f,10,20
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • es6 字元串的擴展和數值的擴展
    es6字元串的擴展 1. es6新增的一些方法 1.1 includes 判斷是否包括在內，返回一個 true or false 1.2 statsWith 判斷是否以什麼開頭，返回一個 true or false 1.3 endWith 判斷是否以什麼結尾，返回一個 true or false 1 ...
  • 我的第一篇博客。(JavaScript的聲明和數據類型的一些筆記)
    這是我的第一篇博客，務必請大家多多關照。 下麵是前端js的變數和數據類型的一些筆記，不是很全請多多包涵。 1.變數 變數的聲明 var 變數名 變數這個容器中放的是數據 變數的賦值 變數名 = 數據 var a; a = 123; 聲明 和 賦值 合併 var b = 123; 變數的連續聲明 va ...
  • js時間的應用(再看看前面,會發現不一樣的)
    1、年份(1970-) 獲取 date.getFullYear(); 設置 date.setFullYear(2016); 2、月份(0-11) 0代表1月 獲取 date.getMonth() 設置 date.setMonth(0);//設置月份為1月 3、日(1-31) 獲取 date.getD ...
  • vue-router導航守衛（router.beforeEach()）的使用
    好久沒寫一些東西了，總是感覺有啥缺少的。~~~~恰好碰到最近在寫一個移動端項目，遇到瞭如何使同一個鏈接在不同條件下跳轉到不同路由組件問題，譬如大家經常看到手機中沒登錄跳轉登錄頁，登陸後跳轉個人信息頁等。廢話不多說了，直接上圖： 這是沒登錄狀態，點擊下麵mine按鈕跳轉至登錄頁 這個是我登錄了自己的賬 ...
  • 記錄微信小程式報錯 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function
    微信小程式報錯 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function 這個報錯是在將數組對象通過頁面傳值，傳到指定頁面時報的錯。 是因為JSON.parse無法識別某些url中的特殊字元，所以報錯 ...
  • easyui的datagrid某個欄位return一個a鏈接
    實現方法用 formatter 但是在click中傳參中遇到一個問題 點擊a時瀏覽器的控制台報錯 最後百思不得其姐一會終於解決了，傳參時轉義一下就好了，如下圖 ...
  • vue cli使用融雲實現聊天
    公司有個項目要實現一個聊天功能,需求如下圖,略顯隨意 公司最終選擇融雲這個弔炸天的即時通信,文檔詳細的一匹,剛開始看文檔感覺很詳細實現起來也不麻煩,有很多開源的demo可以線上演示和下載 不過我們的項目是vue cli創建的,文檔就沒這個了,網羅了一堆博客也有說vue使用的不過都不是很齊全 就總結了 ...
  • js 獲取上傳視頻的時長、大小、尾碼名
    參考資料：獲取時長 自己留個筆記。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類