Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; display:flex; align-items:center; justify-content:center; }
JavaScript
var canvas = document.getElementById("canvas"); canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; var gl = canvas.getContext("webgl"); //Time var dt = 0.004; var time = 0.0; //************** Shader sources ************** var vertexSource = ` attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); } `; var fragmentSource = ` #define PI 3.14159265358979323846 precision highp float; uniform float width; uniform float height; vec2 resolution = vec2(width, height); uniform float time; vec2 rotate(vec2 _st, float _angle) { _st -= 0.5; _st = mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)) * _st; _st.y += 0.5; _st.x += .5; return _st; } void main(){ //set up positions and time vec2 uv = gl_FragCoord.xy/resolution.xy; float t = mod(time, 3.35*PI)+2.0; t = t * sin(PI/5.0); vec2 pos = uv; pos = vec2(0.5, 0.5)-pos; //calculate distances and angles float d = length(pos);/*distance from center*/ float id = 1.0 - d;/*inverse d, greater near the center*/ float theta = (atan(pos.y, pos.x)); float rot = (2.0*PI*(id+1.0))*(t)+cos(6.0*theta); //rotate both positions pos = rotate(pos, -rot); uv = rotate(uv, -rot); //motion for(float i = 1.0; i < 12.0; i+=1.0){ uv.x += .05*(cos(t+id+2.0*i)*uv.y*uv.x); uv += t+.05*(cos(t*.1)+sin(t)/d-3.0*i); } //colors vec3 col = -d + 0.5*(cos(id-rot+pos.xyx+vec3(0,2,4))); vec3 col2 = id + 0.5*cos(id-cos(uv.xyx+vec3(0,2,4))); float arg = (d+rot+uv.x); vec3 col3 = mix(col, col2, id+cos(arg*4.0)); col2 = id-col2; col3 *= col3; gl_FragColor = vec4(((col+col+col2/col3))/(col3-col-col2),1.0); } `; //************** Utility functions ************** window.addEventListener( 'resize', onWindowResize, false ); function onWindowResize(){ canvas.width = Math.min(window.innerWidth, window.innerHeight); canvas.height = canvas.width; gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform1f(widthHandle, canvas.width); gl.uniform1f(heightHandle, canvas.height); } //Compile shader and combine with source function compileShader(shaderSource, shaderType) { var shader = gl.createShader(shaderType); gl.shaderSource(shader, shaderSource); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw "Shader compile failed with: " + gl.getShaderInfoLog(shader); } return shader; } //From https://codepen.io/jlfwong/pen/GqmroZ //Utility to complain loudly if we fail to find the attribute/uniform function getAttribLocation(program, name) { var attributeLocation = gl.getAttribLocation(program, name); if (attributeLocation === -1) { throw "Cannot find attribute " + name + "."; } return attributeLocation; } function getUniformLocation(program, name) { var attributeLocation = gl.getUniformLocation(program, name); if (attributeLocation === -1) { throw "Cannot find uniform " + name + "."; } return attributeLocation; } //************** Create shaders ************** //Create vertex and fragment shaders var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER); var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER); //Create shader programs var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); //Set up rectangle covering entire canvas var vertexData = new Float32Array([ -1.0, 1.0, // top left -1.0, -1.0, // bottom left 1.0, 1.0, // top right 1.0, -1.0 // bottom right ]); //Create vertex buffer var vertexDataBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); // Layout of our data in the vertex buffer var positionHandle = getAttribLocation(program, "position"); gl.enableVertexAttribArray(positionHandle); gl.vertexAttribPointer( positionHandle, 2, // position is a vec2 (2 values per component) gl.FLOAT, // each component is a float false, // don't normalize values 2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes) 0 // how many bytes inside the buffer to start from ); //Set uniform handle var timeHandle = getUniformLocation(program, "time"); var widthHandle = getUniformLocation(program, "width"); var heightHandle = getUniformLocation(program, "height"); gl.uniform1f(widthHandle, canvas.width); gl.uniform1f(heightHandle, canvas.height); function draw() { //Update time time += dt; //Send uniforms to program gl.uniform1f(timeHandle, time); //Draw a triangle strip connecting vertices 0-4 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); requestAnimationFrame(draw); } draw();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas辐射-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号