js实现一个canvas四色圆点转动背景效果代码
代码语言:html
所属分类:背景
代码描述:js实现一个canvas四色圆点转动背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --black: #101820; } body { align-content: start; box-sizing: border-box; display: grid; font-family: sans-serif; font-weight: bold; min-height: 100vh; grid-template-columns: minmax(280px, 485px) 1fr; letter-spacing: 0.03em; line-height: 1; padding: 16px; text-align: center; } body *:focus:not(:focus-visible) { outline: none; } canvas#webgl { left: 0; position: fixed; top: 0; z-index: 0; } button { appearance: none; background: white; border: none; border-radius: 0; color: var(--black); cursor: pointer; font-family: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; } .toggle { background: white; box-shadow: 0 0 32px rgba(17, 25, 33, 0.5); position: relative; z-index: 1; } .toggle[aria-expanded=true] .toggle__content { max-height: 800px; opacity: 1; transition-delay: 0.2s, 0s, 0s; transition-duration: 0.4s, 0.4s, 0s; visibility: visible; } .toggle__button { --space: 8px; align-items: center; display: flex; font-size: 1.2rem; justify-content: center; padding: calc(var(--space) *3); position: relative; width: 100%; } .toggle__icon { position: absolute; top: 50%; right: calc(var(--space) *2); transform: translateY(-50%); } .toggle__content { max-height: 0; opacity: 0; transition-delay: 0s, 0.2s, 0.6s; transition-duration: 0.2s, 0.4s, 0s; transition-property: opacity, max-height, visibility; visibility: hidden; } .toggle__content::before { background-color: var(--black); content: ""; display: block; height: 1px; margin: auto; width: 94px; } .color-picker { display: grid; padding: 20px 20px 16px; position: relative; gap: 16px; z-index: 1; } .color-picker__canvas-wrap { justify-self: center; position: relative; touch-action: none; width: 73%; } .color-picker__canvas { cursor: grab; display: block; width: 100%; } .color-picker__canvas:active { cursor: grabbing; } .color-picker__selected { border: 1px solid #101820; color: #6F747B; padding: 20px; } .color-picker__inputs { margin: 0; padding: 0; line-height: 1; list-style-type: none; } .color-picker__item { display: flex; margin: 0; } .color-picker__input-wrap { align-items: center; background-color: var(--fill); display: flex; flex: 0 1 85%; height: 32px; position: relative; } .color-picker__input-wrap::before { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0.9) 100%); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .color-picker__input { --size: 14px; --scale: 1; --active-scale: 1.3; appearance: none; background: rgba(255, 255, 255, 0); flex: 1; height: 2px; margin: 0 16px; outline: none; padding: 0; position: relative; } .color-picker__input::-webkit-slider-thumb { appearance: none; background: var(--modified-fill); height: var(--size); border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px black; cursor: pointer; transform: scale(var(--scale)); transition: transform 0.2s; width: var(--size); } .color-picker__input::-webkit-slider-thumb:hover { --scale: var(--active-scale); } .color-picker__input:hover, .color-picker__input:active, .color-picker__input:focus { background: white; } .color-picker__input:focus::-webkit-slider-thumb { --scale: 1.3; } .color-picker__input:focus::-moz-range-thumb { --scale: 1.3; } .color-picker__input::-moz-range-thumb { appearance: none; background: var(--modified-fill); height: var(--size); border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px black; cursor: pointer; transform: scale(var(--scale)); transition: transform 0.2s; width: var(--size); } .color-picker__input::-moz-range-thumb:hover { --scale: var(--active-scale); } .color-picker__input:active::-moz-range-thumb { --scale: 1.3; } .color-picker__color-label { background-color: var(--modified-fill); flex: 1 1 auto; margin-left: 1px; } .color-picker__button { appearance: none; background-color: var(--black); color: white; padding: 24px 64px; justify-self: center; text-transform: uppercase; } </style> </head> <body> <div class="toggle" aria-expanded="true"> <button class="toggle__button"><span class="toggle__text">Tetradic Color Picker</span> <svg class="toggle__icon" width="48" height="48" viewBox="0 0 48 48"> <g fill="none" fill-rule="evenodd"> <circle cx="24" cy="24" r="24" fill="#E7E8E8"></circle> <g stroke="#101820" stroke-width="3" transform="translate(14 14)"> <rect width="17" height="17" x="1.5" y="1.5"></rect> <rect width="17" height="5" x="1.5" y="1.5"></rect> </g> </g> </svg> </button> <div class="toggle__content"> <div class="color-picker"> <div class="color-picker__canvas-wrap"> <canvas class="color-picker__canvas" width="325" height="325"></canvas> </div> <ul class="color-picker__inputs"> <li class="color-picker__item" style="--fill:#27d8a6; --modified-fill:#27d8a6;"> <div class="color-picker__input-wrap"> <input class="color-picker__input" type="range" min="0" max="100" step="1"> </div> <span class="color-picker__color-label"></span> </li> <li class="color-picker__item" style="--fill:#b1d827; --modified-fill:#b1d827;"> <div class="color-picker__input-wrap"> <input class="color-picker__input" type="range" min="0" max="100" step="1"> </div> <span class="color-picker__color-label"></span> </li> <li class="color-picker__item" style="--fill:#d82759; --modified-fill:#d82759;"> <div class="color-picker__input-wrap"> <input class="color-picker__input" type="range" min="0" max="100" step="1"> </div> <span class="color-picker__color-label"></span> </li> <li class="color-picker__item" style="--fill:#4e27d8; --modified-fill:#4e27d8;"> <div class="color-picker__input-wrap"> <input class="color-picker__input" type="range" min="0" max="100" step="1"> </div> <span class="color-picker__color-label"></span> </li> </ul> <button class="color-picker__button">Download!</button> </div> </div> </div> <canvas id="webgl" width="933" height="448" style="width: 747px; height: 359px;"></canvas> <script> /** * A basic Web GL class. This provides a very basic setup for GLSL shader code. * Currently it doesn't support anything except for clip-space 3d, but this was * done so that we could start writing fragments right out of the gate. My * Intention is to update it with particle and polygonal 3d support later on. * * @class WTCGL * @author Liam Egan <liam@wethecollective.com> * @version 0.0.8 * @created Jan 16, 2019 */ class WTCGL { /** * The WTCGL Class constructor. If construction of the webGL context fails * for any reason this will return null. * * @TODO make the dimension properties properly optional * @TODO provide the ability to allow for programmable buffers * * @constructor * @param {HTMLElement} el The canvas element to use as the root * @param {string} vertexShaderSource The vertex shader source * @param {string} fragmentShaderSource The fragment shader source * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions * @param {number} [pxratio=1] The pixel aspect ratio of the canvas * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio) * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context */ constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2, params = {}) { this.run = this.run.bind(this); this._onRun = () => {}; // Destructure if an object is aprovided instead a series of parameters if (el instanceof Object && el.el) { ({ el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement } = el); } // If the HTML element isn't a canvas, return null if (!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') { console.log('Provided element should be a canvas element'); return null; } this._el = el; // The context should be either webgl2, webgl or experimental-webgl if (webgl2 === true) { this.isWebgl2 = true; this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params); } else { this.isWebgl2 = false; this._ctx = this._el.getContext("webgl", Object.assign({}, this.webgl_params, params)) || this._el.getContext("experimental-webgl", Object.assign({}, this.webgl_params, params)); } // Set up the extensions this._ctx.getExtension('OES_standard_derivatives'); this._ctx.getExtension('EXT_shader_texture_lod'); this._ctx.getExtension('OES_texture_float'); this._ctx.getExtension('WEBGL_color_buffer_float'); this._ctx.getExtension('OES_texture_float_linear'); this._ctx.getExtension('EXT_color_buffer_float'); // We can't make the context so return an error if (!this._ctx) { console.log('Browser doesn\'t support WebGL '); return null; } // Create the shaders this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource); this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource); // Create the program and link the shaders this._program = this._ctx.createProgram(); this._ctx.attachShader(this._program, this._vertexShader); this._ctx.attachShader(this._program, this._fragmentShader); this._ctx.linkProgram(this._program); // If we can't set up the params, this means the shaders have failed for some reason if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) { console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program)); return null; } // Initialise the vertex buffers this.initBuffers([ -1.0, 1.0, -1., 1.0, 1.0, -1., -1.0, -1.0, -1., 1.0, -1.0, -1.]); // Initialise the frame buffers this.frameBuffers = []; // The program information object. This is essentially a state machine for the webGL instance this._programInfo = { attribs: { vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position') }, uniforms: { projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'), modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'), resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'), time: this._ctx.getUniformLocation(this._program, 'u_time') } }; // Tell WebGL to use our program when drawing this._ctx.useProgram(this._program); this.pxratio = pxratio; this.styleElement = styleElement !== true; this.resize(width, height); } /** * Public methods */ addFrameBuffer(w, h, tiling = 0, buffertype = 0) { // create to render to const gl = this._ctx; const targetTextureWidth = w * this.pxratio; const targetTextureHeight = h * this.pxratio; const targetTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, targetTexture); { // define size and format of level 0 const level = 0; let internalFormat = gl.RGBA; const border = 0; let format = gl.RGBA; let t; if (buffertype & WTCGL.TEXTYPE_FLOAT) { const e = gl.getExtension('OES_texture_float'); window.extension = e; t = e.FLOAT; // internalFormat = gl.RGBA32F; } else if (buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) { // t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES; // gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES : // gl.UNSIGNED_BYTE; const e = gl.getExtension('OES_texture_half_float'); t = this.isWebgl2 ? gl.HALF_FLOAT: e.HALF_FLOAT_OES; // format = gl.RGBA; if (this.isWebgl2) { internalFormat = gl.RGBA16F; } // internalFormat = gl.RGB32F; // format = gl.RGB32F; // window.gl = gl // t = e.HALF_FLOAT_OES; } else { t = gl.UNSIGNED_BYTE; } const type = t; const data = null; gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, targetTextureWidth, targetTextureHeight, border, format, type, data); // gl.generateMipmap(gl.TEXTURE_2D); // set the filtering so we don't need mips gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0