canvas太阳水波倒影

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

let t = 0;
const colors = ["#161616", "#cf894c", "#c74962"];
const canvas = document.getElementsByTagName("canvas")[0];
const ctx = canvas.getContext("2d");
const drawLine = (i, sz) => {
	const ym = (canvas.height - sz) / 2;
	const y0 = canvas.height / 2;
	const y = (t + i) % (sz / 2);
	const h = ((y / ym) * sz) / 40;
	ctx.beginPath();
	ctx.fillStyle = colors[0];
	ctx.fillRect(0, y + y0, canvas.width - 1, h);
};
const drawLines = (sz) => {
	const n = 9;
	for (let i = 0; i < n; ++i) drawLine((sz / 2 / n) * i, sz);
};
const drawGradient = (sz) => {
	const x0 = (canvas.width - sz) / 2;
	const y0 = (canvas.height - sz) / 2;
	const y1 = (canvas.height + sz) / 2;
	const gradient = ctx.createLinearGradient(x0, y0, x0, y1);
	gradient.addColorStop(0, colors[1]);
	gradient.addColorStop(0.5, colors[1]);
	gradient.addColorStop(1, colors[2]);
	ctx.beginPath();
	ctx.fillStyle = gradient;
	ctx.arc(canvas.width / 2, canvas.height / 2, sz / 2, 0, Math.PI * 2);
	ctx.fill();
};
const drawBackground = () => {
	ctx.beginPath();
	ctx.fillStyle = colors[0];
	ctx.fillRect(0, 0, canvas.width, canvas.height);
};
const loop = () => {
	drawBackground();
	const sz = (Math.min(canvas.width, canvas.height) / 3) * 2;
	drawGradient(sz);
	drawLines(sz);
	t += 0.5;
	requestAnimationFrame(loop);
};
const handleResize = () => {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
};
window.onresize = handleResize;
handleResize();
loop();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!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号