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);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
// Set the parameters based on the passed type
if (tiling === WTCGL.IMAGETYPE_TILE) {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
} else if (tiling === WTCGL.IMAGETYPE_MIRROR) {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
} else if (tiling === WTCGL.IMAGETYPE_REGULAR) {
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);
}
}
// Create and bind the framebuffer
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// attach the texture as the first color attachment
const attachmentPoint = gl.COLOR_ATTACHMENT0;
const level = 0;
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
return {
w: w * this.pxratio,
h: h * this.pxratio,
fb: fb,
frameTexture: targetTexture
};
}
/**
* Resizes the canvas to a specified width and height, respecting the pixel ratio
*
* @param {number} w The width of the canvas
* @param {number} h The height of the canvas
* @return {Void}
*/
resize(w, h) {
this.width = w;
this.height = h;
this._el.width = w * this.pxratio;
this._el.height = h * this.pxratio;
this._size = [w * this.pxratio,
h * this.pxratio];
if (this.styleElement) {
this._el.style.width = w + 'px';
this._el.style.height = h + 'px';
}
this._ctx.viewportWidth = w * this.pxratio;
this._ctx.viewportHeight = h * this.pxratio;
this._ctx.uniform2fv(this._programInfo.uniforms.resolution, this._size);
this.initBuffers(this._positions);
}
/**
* Initialise a provided vertex buffer
*
* @param {array} positions The vertex positions to initialise
* @return {Void}
*/
initBuffers(positions) {
this._positions = positions;
this._positionBuffer = this._ctx.createBuffer();
this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
new Float32Array(positions),
this._ctx.STATIC_DRAW);
}
/**
* Add a uniform to the program. At this time the following types are supported:
* - Float - WTCGL.TYPE_FLOAT
* - Vector 2 - WTCGL.TYPE_V2
* - Vector 3 - WTCGL.TYPE_V3
* - Vector 4 - WTCGL.TYPE_V4
*
* @param {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
* @param {WTCGL.UNIFORM_TYPE} type The unfiform type
* @param {number|array} value The unfiform value. The type depends on the uniform type being created
* @return {WebGLUniformLocation} The uniform location for later reference
*/
addUniform(name, type, value) {
let uniform = this._programInfo.uniforms[name];
uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
switch (type) {
case WTCGL.TYPE_INT:
if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
break;
case WTCGL.TYPE_FLOAT:
if (!isNaN(value)) this._ctx.uniform1f(uniform, value);
break;
case WTCGL.TYPE_V2:
if (value instanceof Array && value.length === 2.) this._ctx.uniform2fv(uniform, value);
break;
case WTCGL.TYPE_V3:
if (value instanceof Array && value.length === 3.) this._ctx.uniform3fv(uniform, value);
break;
case WTCGL.TYPE_V4:
if (value instanceof Array && value.length === 4.) this._ctx.uniform4fv(uniform, value);
break;
case WTCGL.TYPE_BOOL:
if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
break;
}
this._programInfo.uniforms[name] = uniform;
return uniform;
}
/**
* Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
* - WTCGL.IMAGETYPE_REGULAR - No tiling, clamp to edges and doesn't need to be power of 2.
* - WTCGL.IMAGETYPE_TILE - full x and y tiling, needs to be power of 2.
* - WTCGL.IMAGETYPE_MIRROR - mirror tiling, needs to be power of 2.
*
* @public
* @param {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
* @param {WTCGL.TYPE_IMAGETYPE} type The type of texture to create. This is basically the tiling behaviour of the texture as described above
* @param {Image} image The image object to add to the texture
* @return {WebGLTexture} The texture object
*/
addTexture(name, type, image, liveUpdate = false) {
var texture = this._ctx.createTexture();
this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL, true);
this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
// this._ctx.generateMipmap(this._ctx.TEXTURE_2D);
// Set the parameters based on the passed type
if (type === WTCGL.IMAGETYPE_MIRROR) {
this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.MIRRORED_REPEAT);
this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.MIRRORED_REPEAT);
} else if (type === WTCGL.IMAGETYPE_REGULAR) {
this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_S, this._ctx.CLAMP_TO_EDGE);
this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_WRAP_T, this._ctx.CLAMP_TO_EDGE);
}
this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MIN_FILTER, this._ctx.LINEAR);
// this._ctx.texParameteri(this._ctx.TEXTURE_2D, this._ctx.TEXTURE_MAG_FILTER, this._ctx.LINEAR);
// Upload the image into the texture.
this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
// add the texture to the array of textures.
this.pushTexture(name, texture, image, this._ctx.TEXTURE_2D, liveUpdate);
return texture;
}
pushTexture(name, texture, image, target, liveUpdate = false) {
let textures = this.textures;
textures.push({
name: name, tex: texture, liveUpdate: liveUpdate, image: image, target: target
});
// Finally set the this.textures (this is just to get around the funnyness of default getters)
this.textures = textures;
}
/**
* Updates a texture location for a given WebGLTexture with an image
*
* @param {WebGLTexture} texture The texture location to update
* @param {Image} image The image object to add to the texture
* @return {Void}
*/
updateTexture(texture, image, name) {
let uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
// Set the texture unit to the uniform
this._ctx.uniform1i(uniform, 0);
this._ctx.activeTexture(this._ctx.TEXTURE0);
this._ctx.bindTexture(this._ctx.TEXTURE_2D, texture);
// Upload the image into the texture.
this._ctx.texImage2D(this._ctx.TEXTURE_2D, 0, this._ctx.RGBA, this._ctx.RGBA, this._ctx.UNSIGNED_BYTE, image);
}
/**
* Initialise texture locations in the program
*
* @return {Void}
*/
initTextures() {
for (let i = 0; i < this.textures.length; i++) {
let name = this.textures[i].name;
let uniform = this._programInfo.uniforms[name];
uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
// Se.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0