html火焰文字特效

news2024/10/7 12:18:02

下面是代码：

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>HTML5火焰文字特效DEMO演示</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
<div style="text-align:center;clear:both;position:absolute;top:10px;left:260px;z-index:999">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
  <div id="canvasContainer"></div>
  
<span id="textInputSpan">
  Your name (max 10 chars) :
  <input id="textInput" maxlength="10" type="text" width="150" />
  <button onclick="changeText()">GO!</button>
</span>

  <script src="js/index.js"></script>

</body>

</html>

style.css：

html, body{
  margin : 0px;
  width : 100%;
  height : 100%;
  overflow: hidden;
  background-color: #000000;
  font-family: sans-serif;
}

#canvasContainer{
  margin : 0px;
  width : 100%;
  height : 100%;
}

#textInputSpan{
  position: absolute;
  color: #FFFFFF;
  font-family: sans-serif;
}

index.js：
 

/*
     * Stats.js 1.1
     * http://code.google.com/p/mrdoob/wiki/stats_js
     *
     */

function Stats()
{
  this.init();
}

Stats.prototype =
  {
  init: function()
  {
    this.frames = 0;
    this.framesMin = 100;
    this.framesMax = 0;

    this.time = new Date().getTime();
    this.timePrev = new Date().getTime();

    this.container = document.createElement("div");
    this.container.style.position = 'absolute';
    this.container.style.fontFamily = 'Arial';
    this.container.style.fontSize = '10px';
    this.container.style.backgroundColor = '#000020';
    this.container.style.opacity = '0.9';
    this.container.style.width = '80px';
    this.container.style.paddingTop = '2px';

    this.framesText = document.createElement("div");
    this.framesText.style.color = '#00ffff';
    this.framesText.style.marginLeft = '3px';
    this.framesText.style.marginBottom = '3px';
    this.framesText.innerHTML = '<strong>FPS</strong>';
    this.container.appendChild(this.framesText);

    this.canvas = document.createElement("canvas");
    this.canvas.width = 74;
    this.canvas.height = 30;
    this.canvas.style.display = 'block';
    this.canvas.style.marginLeft = '3px';
    this.canvas.style.marginBottom = '3px';
    this.container.appendChild(this.canvas);

    this.context = this.canvas.getContext("2d");
    this.context.fillStyle = '#101030';
    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height );

    this.contextImageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);

    setInterval( bargs( function( _this ) { _this.update(); return false; }, this ), 1000 );
  },

  getDisplayElement: function()
  {
    return this.container;
  },

  tick: function()
  {
    this.frames++;
  },

  update: function()
  {
    this.time = new Date().getTime();

    this.fps = Math.round((this.frames * 1000 ) / (this.time - this.timePrev)); //.toPrecision(2);

    this.framesMin = Math.min(this.framesMin, this.fps);
    this.framesMax = Math.max(this.framesMax, this.fps);

    this.framesText.innerHTML = '<strong>' + this.fps + ' FPS</strong> (' + this.framesMin + '-' + this.framesMax + ')';

    this.contextImageData = this.context.getImageData(1, 0, this.canvas.width - 1, 30);
    this.context.putImageData(this.contextImageData, 0, 0);

    this.context.fillStyle = '#101030';
    this.context.fillRect(this.canvas.width - 1, 0, 1, 30);

    this.index = ( Math.floor(30 - Math.min(30, (this.fps / 60) * 30)) );

    this.context.fillStyle = '#80ffff';
    this.context.fillRect(this.canvas.width - 1, this.index, 1, 1);

    this.context.fillStyle = '#00ffff';
    this.context.fillRect(this.canvas.width - 1, this.index + 1, 1, 30 - this.index);

    this.timePrev = this.time;
    this.frames = 0;
  }
}

// Hack by Spite

function bargs( _fn )
{
  var args = [];
  for( var n = 1; n < arguments.length; n++ )
    args.push( arguments[ n ] );
  return function () { return _fn.apply( this, args ); };
}


(function (window){

  var Sakri = window.Sakri || {};
  window.Sakri = window.Sakri || Sakri;

  Sakri.MathUtil = {};

  //return number between 1 and 0
  Sakri.MathUtil.normalize = function(value, minimum, maximum){
    return (value - minimum) / (maximum - minimum);
  };

  //map normalized number to values
  Sakri.MathUtil.interpolate = function(normValue, minimum, maximum){
    return minimum + (maximum - minimum) * normValue;
  };

  //map a value from one set to another
  Sakri.MathUtil.map = function(value, min1, max1, min2, max2){
    return Sakri.MathUtil.interpolate( Sakri.MathUtil.normalize(value, min1, max1), min2, max2);
  };


  Sakri.MathUtil.hexToRgb = function(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }

  Sakri.MathUtil.getRandomNumberInRange = function(min, max){
    return min + Math.random() * (max - min);
  };

  Sakri.MathUtil.getRandomIntegerInRange = function(min, max){
    return Math.round(Sakri.MathUtil.getRandomNumberInRange(min, max));
  };


}(window));


//has a dependency on Sakri.MathUtil

(function (window){

  var Sakri = window.Sakri || {};
  window.Sakri = window.Sakri || Sakri;

  Sakri.Geom = {};

  //==================================================
  //=====================::POINT::====================
  //==================================================

  Sakri.Geom.Point = function (x,y){
    this.x = isNaN(x) ? 0 : x;
    this.y = isNaN(y) ? 0 : y;
  };

  Sakri.Geom.Point.prototype.clone = function(){
    return new Sakri.Geom.Point(this.x,this.y);
  };

  Sakri.Geom.Point.prototype.update = function(x, y){
    this.x = isNaN(x) ? this.x : x;
    this.y = isNaN(y) ? this.y : y;
  };


  //==================================================
  //===================::RECTANGLE::==================
  //==================================================

  Sakri.Geom.Rectangle = function (x, y, width, height){
    this.update(x, y, width, height);
  };

  Sakri.Geom.Rectangle.prototype.update = function(x, y, width, height){
    this.x = isNaN(x) ? 0 : x;
    this.y = isNaN(y) ? 0 : y;
    this.width = isNaN(width) ? 0 : width;
    this.height = isNaN(height) ? 0 : height;
  };

  Sakri.Geom.Rectangle.prototype.getRight = function(){
    return this.x + this.width;
  };

  Sakri.Geom.Rectangle.prototype.getBottom = function(){
    return this.y + this.height;
  };

  Sakri.Geom.Rectangle.prototype.getCenter = function(){
    return new Sakri.Geom.Point(this.getCenterX(), this.getCenterY());
  };

  Sakri.Geom.Rectangle.prototype.getCenterX = function(){
    return this.x + this.width/2;
  };

  Sakri.Geom.Rectangle.prototype.getCenterY=function(){
    return this.y + this.height/2;
  };

  Sakri.Geom.Rectangle.prototype.containsPoint = function(x, y){
    return x >= this.x && y >= this.y && x <= this.getRight() && y <= this.getBottom();
  };


  Sakri.Geom.Rectangle.prototype.clone = function(){
    return new Sakri.Geom.Rectangle(this.x, this.y, this.width, this.height);
  };

  Sakri.Geom.Rectangle.prototype.toString = function(){
    return "Rectangle{x:"+this.x+" , y:"+this.y+" , width:"+this.width+" , height:"+this.height+"}";
  };


}(window));



/**
     * Created by sakri on 27-1-14.
     * has a dependecy on Sakri.Geom
     * has a dependecy on Sakri.BitmapUtil
     */

(function (window){

  var Sakri = window.Sakri || {};
  window.Sakri = window.Sakri || Sakri;

  Sakri.CanvasTextUtil = {};

  //returns the biggest font size that best fits into given width
  Sakri.CanvasTextUtil.getFontSizeForWidth = function(string, fontProps, width, canvas, fillStyle, maxFontSize){
    if(!canvas){
      var canvas = document.createElement("canvas");
    }
    if(!fillStyle){
      fillStyle = "#000000";
    }
    if(isNaN(maxFontSize)){
      maxFontSize = 500;
    }
    var context = canvas.getContext('2d');
    context.font = fontProps.getFontString();
    context.textBaseline = "top";

    var copy = fontProps.clone();
    //console.log("getFontSizeForWidth() 1  : ", copy.fontSize);
    context.font = copy.getFontString();
    var textWidth = context.measureText(string).width;

    //SOME DISAGREEMENT WHETHER THIS SHOOULD BE WITH && or ||
    if(textWidth < width){
      while(context.measureText(string).width < width){
        copy.fontSize++;
        context.font = copy.getFontString();
        if(copy.fontSize > maxFontSize){
          console.log("getFontSizeForWidth() max fontsize reached");
          return null;
        }
      }
    }else if(textWidth > width){
      while(context.measureText(string).width > width){
        copy.fontSize--;
        context.font = copy.getFontString();
        if(copy.fontSize < 0){
          console.log("getFontSizeForWidth() min fontsize reached");
          return null;
        }
      }
    }
    //console.log("getFontSizeForWidth() 2  : ", copy.fontSize);
    return copy.fontSize;
  };


  //=========================================================================================
  //==============::CANVAS TEXT PROPERTIES::====================================
  //========================================================

  Sakri.CanvasTextProperties = function(fontWeight, fontStyle, fontSize, fontFace){
    this.setFontWeight(fontWeight);
    this.setFontStyle(fontStyle);
    this.setFontSize(fontSize);
    this.fontFace = fontFace ? fontFace : "sans-serif";
  };

  Sakri.CanvasTextProperties.NORMAL = "normal";
  Sakri.CanvasTextProperties.BOLD = "bold";
  Sakri.CanvasTextProperties.BOLDER = "bolder";
  Sakri.CanvasTextProperties.LIGHTER = "lighter";

  Sakri.CanvasTextProperties.ITALIC = "italic";
  Sakri.CanvasTextProperties.OBLIQUE = "oblique";


  Sakri.CanvasTextProperties.prototype.setFontWeight = function(fontWeight){
    switch (fontWeight){
      case Sakri.CanvasTextProperties.NORMAL:
      case Sakri.CanvasTextProperties.BOLD:
      case Sakri.CanvasTextProperties.BOLDER:
      case Sakri.CanvasTextProperties.LIGHTER:
        this.fontWeight = fontWeight;
        break;
      default:
        this.fontWeight = Sakri.CanvasTextProperties.NORMAL;
    }
  };

  Sakri.CanvasTextProperties.prototype.setFontStyle = function(fontStyle){
    switch (fontStyle){
      case Sakri.CanvasTextProperties.NORMAL:
      case Sakri.CanvasTextProperties.ITALIC:
      case Sakri.CanvasTextProperties.OBLIQUE:
        this.fontStyle = fontStyle;
        break;
      default:
        this.fontStyle = Sakri.CanvasTextProperties.NORMAL;
    }
  };

  Sakri.CanvasTextProperties.prototype.setFontSize = function(fontSize){
    if(fontSize && fontSize.indexOf && fontSize.indexOf("px")>-1){
      var size = fontSize.split("px")[0];
      fontProperites.fontSize = isNaN(size) ? 24 : size;//24 is just an arbitrary number
      return;
    }
    this.fontSize = isNaN(fontSize) ? 24 : fontSize;//24 is just an arbitrary number
  };

  Sakri.CanvasTextProperties.prototype.clone = function(){
    return new Sakri.CanvasTextProperties(this.fontWeight, this.fontStyle, this.fontSize, this.fontFace);
  };

  Sakri.CanvasTextProperties.prototype.getFontString = function(){
    return this.fontWeight + " " + this.fontStyle + " " + this.fontSize + "px " + this.fontFace;
  };

}(window));


window.requestAnimationFrame =
        window.__requestAnimationFrame ||
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                (function () {
                    return function (callback, element) {
                        var lastTime = element.__lastTime;
                        if (lastTime === undefined) {
                            lastTime = 0;
                        }
                        var currTime = Date.now();
                        var timeToCall = Math.max(1, 33 - (currTime - lastTime));
                        window.setTimeout(callback, timeToCall);
                        element.__lastTime = currTime + timeToCall;
                    };
                })();

var readyStateCheckInterval = setInterval( function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

//========================
//general properties for demo set up
//========================

var canvas;
var context;
var canvasContainer;
var htmlBounds;
var bounds;
var minimumStageWidth = 250;
var minimumStageHeight = 250;
var maxStageWidth = 1000;
var maxStageHeight = 600;
var resizeTimeoutId = -1;
var stats;

function init(){
    canvasContainer = document.getElementById("canvasContainer");
    window.onresize = resizeHandler;
    stats = new Stats();
    canvasContainer.appendChild( stats.getDisplayElement() );
    commitResize();
}

function getWidth( element ){return Math.max(element.scrollWidth,element.offsetWidth,element.clientWidth );}
function getHeight( element ){return Math.max(element.scrollHeight,element.offsetHeight,element.clientHeight );}

//avoid running resize scripts repeatedly if a browser window is being resized by dragging
function resizeHandler(){
    context.clearRect(0,0,canvas.width, canvas.height);
    clearTimeout(resizeTimeoutId);
    clearTimeoutsAndIntervals();
    resizeTimeoutId = setTimeout(commitResize, 300 );
}

function commitResize(){
    if(canvas){
        canvasContainer.removeChild(canvas);
    }
    canvas = document.createElement('canvas');
    canvas.style.position = "absolute";
    context = canvas.getContext("2d");
    canvasContainer.appendChild(canvas);

    htmlBounds = new Sakri.Geom.Rectangle(0,0, getWidth(canvasContainer) , getHeight(canvasContainer));
    if(htmlBounds.width >= maxStageWidth){
        canvas.width = maxStageWidth;
        canvas.style.left = htmlBounds.getCenterX() - (maxStageWidth/2)+"px";
    }else{
        canvas.width = htmlBounds.width;
        canvas.style.left ="0px";
    }
    if(htmlBounds.height > maxStageHeight){
        canvas.height = maxStageHeight;
        canvas.style.top = htmlBounds.getCenterY() - (maxStageHeight/2)+"px";
    }else{
        canvas.height = htmlBounds.height;
        canvas.style.top ="0px";
    }
    bounds = new Sakri.Geom.Rectangle(0,0, canvas.width, canvas.height);
    context.clearRect(0,0,canvas.width, canvas.height);

    if(bounds.width<minimumStageWidth || bounds.height<minimumStageHeight){
        stageTooSmallHandler();
        return;
    }

    var textInputSpan = document.getElementById("textInputSpan");
    textInputSpan.style.top = htmlBounds.getCenterY() + (bounds.height/2) + 20 +"px";
    textInputSpan.style.left = (htmlBounds.getCenterX() - getWidth(textInputSpan)/2)+"px";

    startDemo();
}

function stageTooSmallHandler(){
    var warning = "Sorry, bigger screen required :(";
    context.font = "bold normal 24px sans-serif";
    context.fillText(warning, bounds.getCenterX() - context.measureText(warning).width/2, bounds.getCenterY()-12);
}




//========================
//Demo specific properties
//========================

var animating = false;
var particles = [];
var numParticles = 4000;
var currentText = "SAKRI";
var fontRect;
var fontProperties = new Sakri.CanvasTextProperties(Sakri.CanvasTextProperties.BOLD, null, 100);
var animator;
var particleSource = new Sakri.Geom.Point();;
var particleSourceStart = new Sakri.Geom.Point();
var particleSourceTarget = new Sakri.Geom.Point();

var redParticles = ["#fe7a51" , "#fdd039" , "#fd3141"];
var greenParticles = ["#dbffa6" , "#fcf8fd" , "#99de5e"];
var pinkParticles = ["#fef4f7" , "#f2a0c0" , "#fb3c78"];
var yellowParticles = ["#fdfbd5" , "#fff124" , "#f4990e"];
var blueParticles = ["#9ca2df" , "#222a6d" , "#333b8d"];

var particleColorSets = [redParticles, greenParticles, pinkParticles, yellowParticles, blueParticles];
var particleColorIndex = 0;

var renderParticleFunction;
var renderBounds;
var particleCountOptions = [2000, 4000, 6000, 8000, 10000, 15000, 20000 ];
var pixelParticleCountOptions = [10000, 40000, 60000, 80000, 100000, 150000 ];

function clearTimeoutsAndIntervals(){
    animating = false;
}

function startDemo(){

    fontRect = new Sakri.Geom.Rectangle(Math.floor(bounds.x + bounds.width*.2), 0, Math.floor(bounds.width - bounds.width*.4), bounds.height);
    fontProperties.fontSize = 100;
    fontProperties.fontSize = Sakri.CanvasTextUtil.getFontSizeForWidth(currentText, fontProperties, fontRect.width, canvas);
    fontRect.y = Math.floor(bounds.getCenterY() - fontProperties.fontSize/2);
    fontRect.height = fontProperties.fontSize;
    renderBounds = fontRect.clone();
    renderBounds.x -= Math.floor(canvas.width *.1);
    renderBounds.width += Math.floor(canvas.width *.2);
    renderBounds.y -= Math.floor(fontProperties.fontSize *.5);
    renderBounds.height += Math.floor(fontProperties.fontSize *.6);
    context.font = fontProperties.getFontString();

    createParticles();
    context.globalAlpha = globalAlpha;
    animating = true;
    loop();
}


function loop(){
    if(!animating){
        return;
    }
    stats.tick();
    renderParticles();
    window.requestAnimationFrame(loop, canvas);
}


function createParticles(){
    context.clearRect(0,0,canvas.width, canvas.height);
    context.fillText(currentText, fontRect.x, fontRect.y);
    var imageData = context.getImageData(fontRect.x, fontRect.y, fontRect.width, fontRect.height);
    var data = imageData.data;
    var length = data.length;
    var rowWidth = fontRect.width*4;
    var i, y, x;

    particles = [];
    for(i=0; i<length; i+=4){
        if(data[i+3]>0){
            y = Math.floor(i / rowWidth);
            x = fontRect.x + (i - y * rowWidth) / 4;
            particles.push(x);//x
            particles.push(fontRect.y + y);//y
            particles.push(x);//xOrigin
            particles.push(fontRect.y + y);//yOrigin
        }
    }

    //console.log(particles.length);
    context.clearRect(0,0,canvas.width, canvas.height);

    //pre calculate random numbers used for particle movement
    xDirections = [];
    yDirections = [];
    for(i=0; i<directionCount; i++){
        xDirections[i] = -7 + Math.random() * 14;
        yDirections[i] = Math.random()* - 5;
    }
}


var xDirections, yDirections;
//fidget with these to manipulate effect
var globalAlpha = .11; //amount of trails or tracers
var xWind = 0; //all particles x is effected by this
var threshold = 60; //if a pixels red component is less than this, return particle to it's original position
var amountRed = 25; //amount of red added to a pixel occupied by a particle
var amountGreen = 12; //amount of green added to a pixel occupied by a particle
var amountBlue = 1; //amount of blue added to a pixel occupied by a particle
var directionCount = 100; //number of random pre-calculated x and y directions

function renderParticles(){
    //fill renderBounds area with a transparent black, and render a nearly black text
    context.fillStyle = "#000000";
    context.fillRect(renderBounds.x, renderBounds.y, renderBounds.width, renderBounds.height);
    context.fillStyle = "#010000";
    context.fillText(currentText, fontRect.x, fontRect.y);

    var randomRed = amountRed -5 + Math.random()*10;
    var randomGreen = amountGreen -2 + Math.random()*4;

    var imageData = context.getImageData(renderBounds.x, renderBounds.y, renderBounds.width, renderBounds.height);
    var data = imageData.data;
    var rowWidth = imageData.width * 4;
    var index, i, length = particles.length;
    var d = Math.floor(Math.random()*30);
    xWind += (-.5 + Math.random());//move randomly left or right
    xWind = Math.min(xWind, 1.5);//clamp to a maximum wind
    xWind = Math.max(xWind, -1.5);//clamp to a minimum wind
    for(i=0; i<length; i+=4, d++ ){

        particles[i] += (xDirections[d % directionCount] + xWind);
        particles[i+1] += yDirections[d % directionCount];

        index = Math.round(particles[i] - renderBounds.x) * 4 + Math.round(particles[i+1] - renderBounds.y) * rowWidth;

        data[index] += randomRed;
        data[index + 1] += randomGreen;
        data[index + 2] += amountBlue;

        //if pixels red component is below set threshold, return particle to orgin
        if( data[index] < threshold){
            particles[i] = particles[i+2];
            particles[i+1] = particles[i+3];
        }
    }
    context.putImageData(imageData, renderBounds.x, renderBounds.y);
}



var maxCharacters = 10;

function changeText(){
    var textInput = document.getElementById("textInput");
    if(textInput.value && textInput.text!=""){
        if(textInput.value.length > maxCharacters){
            alert("Sorry, there is only room for "+maxCharacters+" characters. Try a shorter name.");
            return;
        }
        if(textInput.value.indexOf(" ")>-1){
            alert("Sorry, no support for spaces right now :(");
            return;
        }
        currentText = textInput.value;
        clearTimeoutsAndIntervals();
        animating = false;
        setTimeout(commitResize, 100);
    }
}

function changeSettings(){
    clearTimeoutsAndIntervals();
    animating = false;
    setTimeout(commitResize, 100);
}

function setParticleNumberOptions(values){
    var selector = document.getElementById("particlesSelect");
    if(selector.options.length>0 && parseInt(selector.options[0].value) == values[0] ){
        return;
    }
    while(selector.options.length){
        selector.remove(selector.options.length-1);
    }
    for(var i=0;i <values.length; i++){
        selector.options[i] = new Option(values[i], values[i], i==0, i==0);
    }
}

运行效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1405551.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

即插即用篇 | UniRepLKNet：用于音频、视频、点云、时间序列和图像识别的通用感知大卷积神经网络 | DRepConv

即插即用篇 | UniRepLKNet：用于音频、视频、点云、时间序列和图像识别的通用感知大卷积神经网络 | DRepConv

大卷积神经网络（ConvNets）近来受到了广泛研究关注，但存在两个未解决且需要进一步研究的关键问题。1）现有大卷积神经网络的架构主要遵循传统ConvNets或变压器的设计原则，而针对大卷积神经网络的架构设计仍未得到解决。2）随着变压器在多个领域的主导地位，有待研究ConvNets…
阅读更多...
C++ STL之list的使用及模拟实现

C++ STL之list的使用及模拟实现

文章目录 1. 介绍2. list类的使用2.1 list类对象的构造函数2.2 list类对象的容量操作2.3 list类对象的修改操作2.4 list类对象的访问及遍历操作 3. list类的模拟实现 1. 介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭…
阅读更多...
智慧工厂视频监控平台EasyCVR公网收流后内网设备无法播放是什么原因？

智慧工厂视频监控平台EasyCVR公网收流后内网设备无法播放是什么原因？

安防视频监控平台EasyCVR采用了开放式的网络结构&#xff0c;支持高清视频的接入和传输、分发&#xff0c;平台提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;此外&am…
阅读更多...
OSPF基础华为ICT网络赛道

OSPF基础华为ICT网络赛道

6.1.OSPF协议概述 由协议之中OSPF(Open Shortest Path First,开放式最短路径优先)协议是使用场 景非常广泛的动态路由协议之一。 OSPF在RFC2328中定义&#xff0c;是一种基于链路状态算法的路由协议。 静态路由是由工程师手动配置和维护的路由条目&#xff0c;命令行简单明确…
阅读更多...
XTuner InternLM-Chat 个人小助手认知微调实践

XTuner InternLM-Chat 个人小助手认知微调实践

1.概述 目标&#xff1a;通过微调&#xff0c;帮助模型了解对自己身份 方式&#xff1a;使用XTuner进行微调 2.实操 2.1微调环境准备 参考&#xff1a; XTuner复现-CSDN博客 # InternStudio 平台中&#xff0c;从本地 clone 一个已有 pytorch 2.0.1 的环境&#xff08;后…
阅读更多...
Linux 部署mongodb

Linux 部署mongodb

Linux 部署mongodb 一、mongodb安装包下载二、mongodb安装三、连接测试 linux tar包方式部署mongodb 一、mongodb安装包下载 查看系统版本与架构 cat /etc/redhat-release uname -mhttps://www.mongodb.com/download-center/community?jmpdocs下载对应操作系统版本 选择保存…
阅读更多...
题记(26)--Sharing(链表公共后缀)

题记(26)--Sharing(链表公共后缀)

目录 一、题目内容 二、输入描述 三、输出描述 四、输入输出示例 五、完整C语言代码 一、题目内容 To store English words, one method is to use linked lists and store a word letter by letter. To save some space, we may let the words share the same sublist if…
阅读更多...
RuoYi-Cloud本地部署--详细教程

RuoYi-Cloud本地部署--详细教程

文章目录 1、gitee项目地址2、RuoYi-Cloud架构3、本地部署3.1 下载项目3.2 idea打开项目3.3 启动nacos3.4 若依数据库准备3.5 启动redis3.6 修改nacos中的各个模块的配置文件3.7 启动ruoyi前端项目3.8 启动各个微服务模块 4、启动成功 1、gitee项目地址 https://gitee.com/y_p…
阅读更多...
JSP的学习

JSP的学习

1.JSP概念: Java服务端页面;一种动态的网页技术,既可以定义HTML,JS,CSS等静态内容,也可以定义Java代码的动态内容;JSPHTMLJava;JSP的作用:简化开发,避免了在Servlet中直接输出HTML标签; 2.JSP快速入门 3.JSP原理 概念&#xff1a;Java Server Pages&#xff0c;Java服务端页…
阅读更多...
AI分割一切模型SAM(Segment Anything Model)的C++部署

AI分割一切模型SAM(Segment Anything Model)的C++部署

2023年最火爆的分割模型莫过于SAM&#xff0c;截止今天2024年1月19日&#xff0c;github上的star已经达到了41.7k的惊人数量。下面我们来体会一下如何运行这个模型&#xff0c;以及如何用C部署这个模型。 检查cuda环境 我的Cuda版本是12.0.1&#xff0c;如下&#xff0c; Cudn…
阅读更多...
[Tomcat] [最全] 目录和文件详解

[Tomcat] [最全] 目录和文件详解

打开tomcat的解压之后的目录可以看到如下的目录结构&#xff1a; Bin bin目录主要是用来存放tomcat的命令&#xff0c;主要有两大类&#xff0c;一类是以.sh结尾的&#xff08;linux命令&#xff09;&#xff0c;另一类是以.bat结尾的&#xff08;windows命令&#xff09;。 …
阅读更多...
策略模式【结合Spring框架实践】

策略模式【结合Spring框架实践】

Hello!~大家好啊,很高兴我们又见面了,今天我们一起学习设计模式–【策略模式】 初次对此模式不懂的,或者想偷懒的,我强烈建议大家跟着我的一起把概念和代码一起敲一遍!~为啥子??因为我就是这样学会的,哈哈哈! 1.首先我们看下此模式的整体UML图 selector:选择器又叫做上下文co…
阅读更多...
第五课：MindSpore自动并行

第五课：MindSpore自动并行

文章目录 第五课&#xff1a;MindSpore自动并行1、学习总结&#xff1a;数据并行模型并行MindSpore算子级并行算子级并行示例 流水线并行GPipe和Micro batch1F1B流水线并行示例 内存优化重计算优化器并行 MindSpore分布式并行模式课程ppt及代码地址 2、学习心得&#xff1a;3、…
阅读更多...
Android 内存优化 内存泄漏

Android 内存优化 内存泄漏

内存抖动 内存抖动是由于短时间内有大量对象进出新生区导致的&#xff0c;内存忽高忽低&#xff0c;有短时间内快速上升和下落的趋势&#xff0c;分析图呈锯齿状。 它伴随着频繁的GC&#xff0c;GC 会大量占用 UI 线程和CPU 资源&#xff0c;会导致APP 整体卡顿&#xff0c;甚…
阅读更多...
Jupyter Notebook安装使用教程

Jupyter Notebook安装使用教程

Jupyter Notebook 是一个基于网页的交互式计算环境&#xff0c;允许你创建和共享包含代码、文本说明、图表和可视化结果的文档。它支持多种编程语言&#xff0c;包括 Python、R、Julia 等。其应用场景非常广泛&#xff0c;特别适用于数据科学、机器学习和教育领域。它可以用于数…
阅读更多...
安装ROS2-ubuntu

安装ROS2-ubuntu

相较于ROS1&#xff0c;ROS2在设计之初就考虑了在产品环境下⾯临的⼀些挑战&#xff0c;具体来说&#xff0c;ROS2采⽤&#xff08;或者计划采⽤&#xff09;以下策略以提升其在产品环境的适⽤度&#xff1a; ⽀持多机器⼈ 对⼩型嵌⼊式设备和微控制器的⽀持 实时系统&am…
阅读更多...
《WebKit 技术内幕》学习之四（1）： 资源加载和网络栈

《WebKit 技术内幕》学习之四（1）： 资源加载和网络栈

第四章 资源加载和网络栈 使用网络栈来下载网页和网页资源是渲染引擎工作的第一步 1.WebKit 资源加载机制 1.1 资源 网页本身就是一种资源、网页还需要依赖很多其他的资源(图片、视频) &#xff08;1&#xff09;HTML 支持的资源主要包括以下几种类型&#xff1a; HTML 页…
阅读更多...
Linux Shell alias的简单用法：给shell起别名

Linux Shell alias的简单用法：给shell起别名

alias&#xff1a;显示该用户所有起过别名的命令 alias lla‘ls -al’&#xff1a;给ls -al起别名为lla unalias lla&#xff1a;取消lla的别名 1、该命令所有的操作只对个人用户生效&#xff0c;给普通用户起的别名在root用户下不生效&#xff0c;只有回到普通用户才生效。 2…
阅读更多...
JOSEF约瑟 中间继电器JZ14-44Z/4 不带外罩和接线座

JOSEF约瑟 中间继电器JZ14-44Z/4 不带外罩和接线座

系列型号 JZ14-014Z/0中间继电器;JZ14-014Z/1中间继电器; JZ14-014Z/2中间继电器;JZ14-014Z/4中间继电器; JZ14-014J/0中间继电器;JZ14-014J/1中间继电器; JZ14-014J/2中间继电器;JZ14-014J/3中间继电器; JZ14-014J/4中间继电器;JZ14-140Z/0中间继电器; JZ14-140Z/1中间继…
阅读更多...
[UI5 常用控件] 01.Text

[UI5 常用控件] 01.Text

文章目录 前言1. 普通文本2. 长文本&#xff1a;3. 设置最大显示行数 ( maxLines3 )4. 单行显示 ( wrappingfalse )5. 显示空白符 ( renderWhitespacetrue )6. 使用 - 连接单词:只适用于英文 ( wrappingTypeHyphenated )7. 空白时使用 - 代替 ( emptyIndicatorModeOn )8. JSON数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023