html5 canva实现粒子波浪滚动特效

已于 2022-05-26 18:54:55 修改
阅读量1.2k 收藏 4
点赞数
分类专栏： 笔记 文章标签： html5 javascript 前端 css css3
于 2022-05-07 20:45:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31595113/article/details/124638629
版权

<!doctype html>

粒子波 
<style>
    html,
    body {
        height: 100%;
    }
    
    body {
        margin: 0;
        background: #000;
    }
    
    canvas {
        display: block;
    }
    
    .waves {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
</style>

<script>
    class ShaderProgram {

        constructor(holder, options = {}) {

            options = Object.assign({
                antialias: false,
                depthTest: false,
                mousemove: false,
                autosize: true,
                side: 'front',
                vertex: `
    precision highp float;

    attribute vec4 a_position;
    attribute vec4 a_color;

    uniform float u_time;
    uniform vec2 u_resolution;
    uniform vec2 u_mousemove;
    uniform mat4 u_projection;

    varying vec4 v_color;

    void main() {

      gl_Position = u_projection * a_position;
      gl_PointSize = (10.0 / gl_Position.w) * 100.0;

      v_color = a_color;

    }`,
                fragment: `
    precision highp float;

    uniform sampler2D u_texture;
    uniform int u_hasTexture;

    varying vec4 v_color;

    void main() {

      if ( u_hasTexture == 1 ) {

        gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);

      } else {

        gl_FragColor = v_color;

      }

    }`,
                uniforms: {},
                buffers: {},
                camera: {},
                texture: null,
                onUpdate: (() => {}),
                onResize: (() => {}),
            }, options)

            const uniforms = Object.assign({
                time: {
                    type: 'float',
                    value: 0
                },
                hasTexture: {
                    type: 'int',
                    value: 0
                },
                resolution: {
                    type: 'vec2',
                    value: [0, 0]
                },
                mousemove: {
                    type: 'vec2',
                    value: [0, 0]
                },
                projection: {
                    type: 'mat4',
                    value: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
                },
            }, options.uniforms)

            const buffers = Object.assign({
                position: {
                    size: 3,
                    data: []
                },
                color: {
                    size: 4,
                    data: []
                },
            }, options.buffers)

            const camera = Object.assign({
                fov: 60,
                near: 1,
                far: 10000,
                aspect: 1,
                z: 100,
                perspective: true,
            }, options.camera)

            const canvas = document.createElement('canvas')
            const gl = canvas.getContext('webgl', {
                antialias: options.antialias
            })

            if (!gl) return false

            this.count = 0
            this.gl = gl
            this.canvas = canvas
            this.camera = camera
            this.holder = holder
            this.onUpdate = options.onUpdate
            this.onResize = options.onResize
            this.data = {}

            holder.appendChild(canvas)

            this.createProgram(options.vertex, options.fragment)

            this.createBuffers(buffers)
            this.createUniforms(uniforms)

            this.updateBuffers()
            this.updateUniforms()

            this.createTexture(options.texture)

            gl.enable(gl.BLEND)
            gl.enable(gl.CULL_FACE)
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE)
            gl[options.depthTest ? 'enable' : 'disable'](gl.DEPTH_TEST)

            if (options.autosize)
                window.addEventListener('resize', e => this.resize(e), false)
            if (options.mousemove)
                window.addEventListener('mousemove', e => this.mousemove(e), false)

            this.resize()

            this.update = this.update.bind(this)
            this.time = {
                start: performance.now(),
                old: performance.now()
            }
            this.update()

        }

        mousemove(e) {

            let x = e.pageX / this.width * 2 - 1
            let y = e.pageY / this.height * 2 - 1

            this.uniforms.mousemove = [x, y]

        }

        resize(e) {

            const holder = this.holder
            const canvas = this.canvas
            const gl = this.gl

            const width = this.width = holder.offsetWidth
            const height = this.height = holder.offsetHeight
            const aspect = this.aspect = width / height
            const dpi = this.dpi = devicePixelRatio

            canvas.width = width * dpi
            canvas.height = height * dpi
            canvas.style.width = width + 'px'
            canvas.style.height = height + 'px'

            gl.viewport(0, 0, width * dpi, height * dpi)
            gl.clearColor(0, 0, 0, 0)

            this.uniforms.resolution = [width, height]
            this.uniforms.projection = this.setProjection(aspect)

            this.onResize(width, height, dpi)

        }

        setProjection(aspect) {

            const camera = this.camera

            if (camera.perspective) {

                camera.aspect = aspect

                const fovRad = camera.fov * (Math.PI / 180)
                const f = Math.tan(Math.PI * 0.5 - 0.5 * fovRad)
                const rangeInv = 1.0 / (camera.near - camera.far)

                const matrix = [
                    f / camera.aspect, 0, 0, 0,
                    0, f, 0, 0,
                    0, 0, (camera.near + camera.far) * rangeInv, -1,
                    0, 0, camera.near * camera.far * rangeInv * 2, 0
                ]

                matrix[14] += camera.z
                matrix[15] += camera.z

                return matrix

            } else {

                return [
                    2 / this.width, 0, 0, 0,
                    0, -2 / this.height, 0, 0,
                    0, 0, 1, 0, -1, 1, 0, 1,
                ]

            }

        }

        createShader(type, source) {

            const gl = this.gl
            const shader = gl.createShader(type)

            gl.shaderSource(shader, source)
            gl.compileShader(shader)

            if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

                return shader

            } else {

                console.log(gl.getShaderInfoLog(shader))
                gl.deleteShader(shader)

            }

        }

        createProgram(vertex, fragment) {

            const gl = this.gl

            const vertexShader = this.createShader(gl.VERTEX_SHADER, vertex)
            const fragmentShader = this.createShader(gl.FRAGMENT_SHADER, fragment)

            const program = gl.createProgram()

            gl.attachShader(program, vertexShader)
            gl.attachShader(program, fragmentShader)
            gl.linkProgram(program)

            if (gl.getProgramParameter(program, gl.LINK_STATUS)) {

                gl.useProgram(program)
                this.program = program

            } else {

                console.log(gl.getProgramInfoLog(program))
                gl.deleteProgram(program)

            }

        }

        createUniforms(data) {

            const gl = this.gl
            const uniforms = this.data.uniforms = data
            const values = this.uniforms = {}

            Object.keys(uniforms).forEach(name => {

                const uniform = uniforms[name]

                uniform.location = gl.getUniformLocation(this.program, 'u_' + name)

                Object.defineProperty(values, name, {
                    set: value => {

                        uniforms[name].value = value
                        this.setUniform(name, value)

                    },
                    get: () => uniforms[name].value
                })

            })

        }

        setUniform(name, value) {

            const gl = this.gl
            const uniform = this.data.uniforms[name]

            uniform.value = value

            switch (uniform.type) {
                case 'int':
                    {
                        gl.uniform1i(uniform.location, value)
                        break
                    }
                case 'float':
                    {
                        gl.uniform1f(uniform.location, value)
                        break
                    }
                case 'vec2':
                    {
                        gl.uniform2f(uniform.location, ...value)
                        break
                    }
                case 'vec3':
                    {
                        gl.uniform3f(uniform.location, ...value)
                        break
                    }
                case 'vec4':
                    {
                        gl.uniform4f(uniform.location, ...value)
                        break
                    }
                case 'mat2':
                    {
                        gl.uniformMatrix2fv(uniform.location, false, value)
                        break
                    }
                case 'mat3':
                    {
                        gl.uniformMatrix3fv(uniform.location, false, value)
                        break
                    }
                case 'mat4':
                    {
                        gl.uniformMatrix4fv(uniform.location, false, value)
                        break
                    }
            }

            // ivec2       : uniform2i,
            // ivec3       : uniform3i,
            // ivec4       : uniform4i,
            // sampler2D   : uniform1i,
            // samplerCube : uniform1i,
            // bool        : uniform1i,
            // bvec2       : uniform2i,
            // bvec3       : uniform3i,
            // bvec4       : uniform4i,

        }

        updateUniforms() {

            const gl = this.gl
            const uniforms = this.data.uniforms

            Object.keys(uniforms).forEach(name => {

                const uniform = uniforms[name]

                this.uniforms[name] = uniform.value

            })

        }

        createBuffers(data) {

            const gl = this.gl
            const buffers = this.data.buffers = data
            const values = this.buffers = {}

            Object.keys(buffers).forEach(name => {

                const buffer = buffers[name]

                buffer.buffer = this.createBuffer('a_' + name, buffer.size)

                Object.defineProperty(values, name, {
                    set: data => {

                        buffers[name].data = data
                        this.setBuffer(name, data)

                        if (name == 'position')
                            this.count = buffers.position.data.length / 3

                    },
                    get: () => buffers[name].data
                })

            })

        }

        createBuffer(name, size) {

            const gl = this.gl
            const program = this.program

            const index = gl.getAttribLocation(program, name)
            const buffer = gl.createBuffer()

            gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
            gl.enableVertexAttribArray(index)
            gl.vertexAttribPointer(index, size, gl.FLOAT, false, 0, 0)

            return buffer

        }

        setBuffer(name, data) {

            const gl = this.gl
            const buffers = this.data.buffers

            if (name == null && !gl.bindBuffer(gl.ARRAY_BUFFER, null)) return

            gl.bindBuffer(gl.ARRAY_BUFFER, buffers[name].buffer)
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW)

        }

        updateBuffers() {

            const gl = this.gl
            const buffers = this.buffers

            Object.keys(buffers).forEach(name =>
                buffers[name] = buffer.data
            )

            this.setBuffer(null)

        }

        createTexture(src) {

            const gl = this.gl
            const texture = gl.createTexture()

            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]))

            this.texture = texture

            if (src) {

                this.uniforms.hasTexture = 1
                this.loadTexture(src)

            }

        }

        loadTexture(src) {

            const gl = this.gl
            const texture = this.texture

            const textureImage = new Image()

            textureImage.onload = () => {

                gl.bindTexture(gl.TEXTURE_2D, texture)

                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage)

                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)

                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)

                // gl.generateMipmap( gl.TEXTURE_2D )

            }

            textureImage.src = src

        }

        update() {

            const gl = this.gl

            const now = performance.now()
            const elapsed = (now - this.time.start) / 5000
            const delta = now - this.time.old
            this.time.old = now

            this.uniforms.time = elapsed

            if (this.count > 0) {
                gl.clear(gl.COLORBUFFERBIT)
                gl.drawArrays(gl.POINTS, 0, this.count)
            }

            this.onUpdate(delta)

            requestAnimationFrame(this.update)

        }

    }

    const pointSize = 2.5

    const waves = new ShaderProgram(document.querySelector('.waves'), {
        texture: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAAD///8v0wLRAAAAJHRSTlMAC/goGvDhmwcExrVjWzrm29TRqqSKenRXVklANSIUE8mRkGpv+HOfAAABCElEQVQ4y4VT13LDMAwLrUHteO+R9f/fWMfO6dLaPeKVEECRxOULWsEGpS9nULDwia2Y+ALqUNbAWeg775zv+sA4/FFRMxt8U2FZFCVWjR/YrH4/H9sarclSKdPMWKzb8VsEeHB3m0shkhVCyNzeXeAQ9Xl4opEieX2QCGnwGbj6GMyjw9t1K0fK9YZunPXeAGsfJtYjwzxaBnozGGorYz0ypK2HzQSYx1y8DgSRo2ewOiyh2QWOEk1Y9OrQV0a8TiBM1a8eMHWYnRMy7CZ4t1CmyRkhSUvP3gRXyHOCLBxNoC3IJv//ZrJ/kxxUHPUB+6jJZZHrpg6GOjnqaOmzp4NDR48OLxn/H27SRQ08S0ZJAAAAAElFTkSuQmCC',
        uniforms: {
            size: {
                type: 'float',
                value: pointSize
            },
            field: {
                type: 'vec3',
                value: [0, 0, 0]
            },
            speed: {
                type: 'float',
                value: 5
            },
        },
        vertex: `
#define M_PI 3.1415926535897932384626433832795

precision highp float;

attribute vec4 a_position;
attribute vec4 a_color;

uniform float u_time;
uniform float u_size;
uniform float u_speed;
uniform vec3 u_field;
uniform mat4 u_projection;

varying vec4 v_color;

void main() {

  vec3 pos = a_position.xyz;

  pos.y += (
    cos(pos.x / u_field.x * M_PI * 8.0 + u_time * u_speed) +
    sin(pos.z / u_field.z * M_PI * 8.0 + u_time * u_speed)
  ) * u_field.y;

  gl_Position = u_projection * vec4( pos.xyz, a_position.w );
  gl_PointSize = ( u_size / gl_Position.w ) * 100.0;

  v_color = a_color;

}`,
        fragment: `
precision highp float;

uniform sampler2D u_texture;

varying vec4 v_color;

void main() {

  gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);

}`,
        onResize(w, h, dpi) {

            const position = [],
                color = []

            const width = 400 * (w / h)
            const depth = 400
            const height = 3
            const distance = 5

            for (let x = 0; x < width; x += distance) {
                for (let z = 0; z < depth; z += distance) {

                    position.push(-width / 2 + x, -30, -depth / 2 + z)
                    color.push(0, 1 - (x / width) * 1, 0.5 + x / width * 0.5, z / depth)

                }
            }

            this.uniforms.field = [width, height, depth]

            this.buffers.position = position
            this.buffers.color = color

            this.uniforms.size = (h / 400) * pointSize * dpi

        },
    })
</script>
效果图如下： ![`在这里插入图片描述`](https://img-blog.csdnimg.cn/500f421474254bad9885b84796da4baa.png#pic_center)
Heartbeats g
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
HTML5 Canvas绘制3D波浪粒子动画特效.zip
07-11
HTML5 Canvas绘制3D波浪粒子动画特效
7款让人惊叹的HTML5粒子动画特效
weixin_34249367的博客
01-18 2806
HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效，特别是Canvas特性，可以实现在网页上绘制任何图形和动画。本文要分享7款让人惊叹的HTML5粒子动画特效，这些粒子特效都提供源代码下载供大家学习。 1、HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移...
HTML做成一个粒子漩涡特效页面
德乐懿的博客
06-10 2201
大家好，今天制作制作一个粒子漩涡特效的页面！ 先看具体效果： 要在一个单一的 index.html 页面中实现粒子漩涡特效，我们可以使用HTML、CSS和JavaScript（不需要外部库）。下面是一个简单的例子，展示了如何使用纯HTML和JavaScript来创建一个基本的粒子漩涡效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor
使用canvas js实现运动粒子动态效果
热门推荐
樱花的博客
07-27 2万+
&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; html, body { margin: 0; padding: 0; height: 1
html实现验证码效果,html5使用canva实现验证码效果（代码实例）
weixin_33544518的博客
06-04 1102
通常我们在登录界面上都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。一般情况下验证码都是用PHP和java等后端语言编写；其实，验证码也可以用前端技术实现：用canva或者SVG绘制验证码。本章给大家介绍html5使用canva绘制验证码(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。canvas验证码展示效果：点击实...
html5canva绘制圆环填充效果,基于canvas实现的绚丽圆圈效果完整实例
weixin_35241897的博客
06-04 421
本文实例讲述了基于canvas实现的绚丽圆圈效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：demobody {margin:0; background:black;}#canvas {border:3px solid gray; box-shadow:0px 0px 2px 2px #D5D5D5; margin-left:100px; margin-top:50px;}#...
html5 canva 图形拼接,HTML5 Canvas 合成
weixin_29530803的博客
06-08 144
HTML5 Canvas 合成在HTML5画布上绘制形状时，可以设置如何将绘制的内容与画布上已绘制的内容进行合成。本文介绍如何将绘画内容与画布上已有的内容混合在一起.画布合成2D上下文具有两个属性，这些属性控制画布的合成模式。这些是:globalAlphaglobalCompositeOperationglobalAlpha该globalAlpha属性确定绘制内容的透明度/不透明度。它可以取0到1...
html5 php手机验证码,html5使用canva实现验证码效果（代码实例）
weixin_42469546的博客
03-26 357
通常我们在登录界面上都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。一般情况下验证码都是用PHP和java等后端语言编写；其实，验证码也可以用前端技术实现：用canva或者SVG绘制验证码。本章给大家介绍html5使用canva绘制验证码(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。canvas验证码展示效果：点击实...
html5canva绘制圆环填充效果,Canvas用随机线条绘制填充圆形
weixin_29146779的博客
06-04 361
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),width = canvas.width = window.innerWidth,height = canvas.height = window.inne...
html5canva绘制圆环填充效果,Canvas画图-一个比想象中更骚气的圆(渐变圆环)
weixin_39758494的博客
06-04 1442
之前介绍了Canvas画图基础，这篇介绍一下画一个带渐变效果的圆。一个渐变的圆环渐变色应用广泛，和圆环结合做进度条非常酷，今天我们就来画一个这样的圆环：Canvas渐变在Canvas画图基础中我们知道给canvas上色主要是ctx.fillStyle和ctx.strokeStyle方法，这里是圆环，所以主要讲strokeStyle方法，fillStyle方法也同样适用。看一下上面那个圆，像把一个线...
HTML5结合Canva实现的粒子数字随机变化实例动画特效源码.zip
11-04
在本实例中，我们将探讨如何利用HTML5与Canva库来创建一个粒子数字随机变化的动画特效。 Canva是一个JavaScript库，专门用于在HTML5画布（canvas）上进行图形绘制。它提供了高级的绘图功能，让开发者能够轻松地创建...
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
09-28
在开发Web应用时，我们经常使用HTML5的Canvas API来绘制复杂的图形和交互式界面。然而，Canvas元素本身并不直接支持鼠标事件监听，这给在Canvas上实现交互带来了一定的困难。为了解决这个问题，我们可以借助第三方库...
HTML5网页背景特效气泡上升
06-24
在这个“HTML5网页背景特效气泡上升”的项目中，我们主要关注的是HTML5的Canvas元素以及如何利用它来实现动态的背景动画。 Canvas是HTML5中一个非常关键的组成部分，它是一个二维绘图API，允许开发者通过JavaScript...
Html5 Canvas 实现滚动的图片
dexia7362的博客
09-16 1218
今天一直在找html5 canvas的使用实例。想画一张地图，再画个小车在上面跑。运气好找到了一个大神写的js代码。该代码实现了图片的左右来回滚动，现在粘贴在博客里记录一下： <html> <head> <meta charset="utf-8" /> <title>LScroll5.html</title> &l...
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1496
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1180
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 171
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 212
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
html5网页设计作业
03-31
抱歉，我是一名AI语言模型，无法为您创建HTML5网页设计作业。但我可以为您提供一些HTML5网页设计的建议和资源： 1. 确定网页的目的和受众，设计网页的结构和布局。 2. 使用HTML5标签和语义化的结构来创建网页，包括header、nav、section、article、footer等。 3. 使用CSS3来为网页添加样式和布局，包括颜色、字体、布局、动画等。 4. 添加交互元素，如导航菜单、表单、响应式设计、媒体元素等。 5. 确保网页的兼容性和可访问性，使用Web标准和最佳实践来编写代码。 一些有用的资源： 1. W3Schools：HTML5和CSS3的教程和参考。 2. CodePen：一个在线代码编辑器，可以查看其他人的网页设计作品。 3. Canva：一个图形设计工具，可以创建漂亮的网页设计原型。 4. Bootstrap：一个流行的CSS框架，可以加速网页设计的开发。 5. Google Fonts：一个免费的字体库，可以使您的网页看起来更专业。 希望这些资源对您有所帮助！
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值