奔梦向前-用代码实现网页爱心动画

最新推荐文章于 2024-01-25 18:09:50 发布

奔梦向前

最新推荐文章于 2024-01-25 18:09:50 发布

阅读量1.2k

点赞数

分类专栏：网页特效文章标签： css3 js css web html5

本文链接：https://blog.csdn.net/weixin_44519957/article/details/105689121

版权

首先这是HTML代码、记得Ctrl+C复制

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>编程特趣</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="canvas" width="1400" height="600"></canvas>
<script src="js/script.js"></script>
</body>
</html>

这是Css代码选中所有复制、Ctrl+C复制

body {
background-color: #000;
margin: 0;
overflow: hidden;
background-repeat: no-repeat;
}

这是JavaScript代码选中复制所有-很多人不知道啥是JavaScript-他是js的缩写，你记住了吗！Ctrl+C复制！

var canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Initialize the GL context
var gl = canvas.getContext('webgl');
if(!gl){
console.error("Unable to initialize WebGL.");
}

//Time step
var dt = 0.015;
//Time
var time = 0.0;

//************** Shader sources **************

var vertexSource = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;

var fragmentSource = `
precision highp float;

uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);

uniform float time;

#define POINT_COUNT 8

vec2 points[POINT_COUNT];
const float speed = -0.5;
const float len = 0.25;
float intensity = 0.9;
float radius = 0.015;

//https://www.shadertoy.com/view/MlKcDD
//Signed distance to a quadratic bezier
float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){
   vec2 a = B - A;
   vec2 b = A - 2.0*B + C;
   vec2 c = a * 2.0;
   vec2 d = A - pos;

float kk = 1.0 / dot(b,b);
float kx = kk * dot(a,b)