用html做龙卷风特效,HTML5/Canvas 彩色龙卷风

谁借莪１个温暖的怀抱￠ 2022-10-06 10:50 14阅读 0赞

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.requestAnimFrame = (function() \{

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) \{

window.setTimeout(callback, 1000 / 60);

\};

\})();

var c = document.getElementById("canv");

c.width = window.innerWidth;

c.height = window.innerHeight;

var $ = c.getContext('2d');

run();

function run() \{

window.requestAnimFrame(run);

draw();

\};

var dx = 0,

dy = 0;

var circles = \[\];

var cols = \['hsla(169, 95%, 25%, 1)',

'hsla(109, 95%, 35%, 1)',

'hsla(59, 95%, 55%, 1)',

'hsla(34, 95%, 45%, 1)'

\];

for (var i = 0; i <= 90; i++) \{

var circle = \{

t: Math.random() \* 360,

dt: Math.random() \* .2,

s: Math.random() \* 10,

r: Math.ceil(Math.random() \* 300),

dr: Math.ceil(Math.random() \* 6),

c: cols\[Math.floor(Math.random() \* cols.length)\]

\};

circles.push(circle);

\}

function draw() \{

c.width = c.width;

for (var i in circles) \{

var circle = circles\[i\];

circle.t += circle.dt;

circle.t %= 360;

dx = Math.sin(circle.t) \* circle.s;

dy = Math.cos(circle.t) \* circle.s;

$.globalAlpha = .6;

$.strokeStyle = circle.c;

$.beginPath();

for (var j = 0; j <= circle.dr; j++)

$.arc(c.width / 2 + dx, c.height / 2 + dy, circle.r + j, 0, 2 \* Math.PI);

$.closePath();

$.stroke();

\}

window.addEventListener('resize', function() \{

c.width = w = window.innerWidth;

c.height = h = window.innerHeight;

c.style.position = 'absolute';

c.style.left = (window.innerWidth - w) \*

.01 + 'px';

c.style.top = (window.innerHeight - h) \*

.01 + 'px';

\});

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关【HTML】html5 canvas全屏烟花动画特效

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta

刺骨的言语ヽ痛彻心扉/ 2023年07月21日 08:36/ 0 赞/ 55 阅读

相关 html5 玻璃破碎,HTML5/Canvas玻璃裂纹特效 | 粒子轨迹

JavaScript 语言： JaveScriptBabelCoffeeScript 确定 /\\/ /\ ---- CORE ---- \/ /\\/ const

妖狐艹你老母/ 2022年10月08日 00:40/ 0 赞/ 207 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 279 阅读

相关用html做龙卷风特效,HTML5/Canvas 彩色龙卷风

JavaScript 语言： JaveScriptBabelCoffeeScript 确定 window.requestAnimFrame = (function()

谁借莪１个温暖的怀抱￠/ 2022年10月06日 10:50/ 0 赞/ 15 阅读

相关 HTML5 canvas和js烟花js特效

[下载地址][Link 1]使用HTML5 canvas和js实现的烟花特效，鼠标点击出现烟花网页背景特效。 ![1630569798.png][] dd: [Link

系统管理员/ 2022年09月10日 05:10/ 0 赞/ 574 阅读

相关 HTML5 SVG彩色菱形背景js特效

[下载地址][Link 1] HTML5 SVG彩色菱形背景特效是一款彩色密集的菱形背景，渐变的菱形平铺背景，酷炫的菱形ui背景特效。 ![bbf47bb6d1cb7d0b

绝地灬酷狼/ 2022年08月28日 03:55/ 0 赞/ 357 阅读

相关 HTML5Canvas

Canvas -> 做游戏：白鹭引擎、trees... 动画图表、频谱画图 HTML5 不只是单纯HTML 本身是一个标签 <canvas></canva

素颜马尾好姑娘i/ 2022年06月10日 05:19/ 0 赞/ 317 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 383 阅读

相关 HTML5之canvas彩色动感小球

一：代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

╰+哭是因爲堅強的太久メ/ 2022年05月13日 05:24/ 0 赞/ 271 阅读

相关 html5 canvas实现雷达扫描动画特效

先看一下最终效果 ![20210303142135884.gif][] 实现思路 1. 绘制4个圆 2. 绘制一个十字线 3. 绘制一个扫描

矫情吗；*/ 2021年07月25日 02:39/ 0 赞/ 1212 阅读