首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

canvas实现漂亮的下雨效果

说明 这篇文章说如何用canvas画出漂亮的下雨效果,先看看最后实现的效果吧。 效果图 ? 解释 看图来分析下,我们需要实现哪些效果。...mouseDis为半径,这个范围内的雨滴 都会散开,形成许多小水珠 var mouseDis = 35; // 更新一次动画,画lineNum 条雨滴,lineNum 值越大,下雨就越密集...var lineNum = 3; // 跟随鼠标方向 变化下雨方向的 速度 // 鼠标移动后,下雨的方向 会慢慢改变,主要靠speedx 这个变量 var...speedx = 0; // maxspeedx 为 speedx 可以取的最大值 // 当 speedx = maxspeedx时,下雨方向 会 随鼠标移动方向立即改变...,取值范围: -1 到 1 // 当 speedx = maxspeedx时,下雨方向 会 随鼠标移动方向立即改变 speedx = speedx + (maxspeedx

1.6K11
您找到你想要的搜索结果了吗?
是的
没有找到

整理一下JavaScript字符串的截取以及数组的截取

在编写前端时,截取字符串或者是截取数组的部分元素都是频繁出现的场景,所以在这整理一下 一、截取字符串 JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),...它们都可以接受一个或两个参数: let str = '我是大头大头下雨不愁'; 复制 1、slice() 使用一个参数 console.log(str.slice(2)) // 打印(从第2位开始截取)...let str = '大头大头,下雨不愁'; console.log(str.split(',')) // 打印 // (2) ["大头大头", "下雨不愁"] 复制 join() 方法用于把数组中的所有元素放入一个字符串...let arr = ['我是', '大头大头', '下雨不愁'] console.log(arr.join('-')) // 打印 // 我是-大头大头-下雨不愁 复制 二、截取数组 1、splice...[] // (4) ["我是", "大头", "大头大头", "下雨不愁"] 复制 2、slice() slice() 方法可从已有的数组中返回选定的元素(该方法不改变原始数组)。

2.2K20

双指针解决【接雨水】问题

到回溯法,再看 N 皇后问题》 《回溯法解决【电话号码的字母组合】问题》 本篇将带来双指针算法经典题目之:接雨水问题; 题目: 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水...示例 2: 输入:height = [4,2,0,3,2,5] 输出:9 解题思路: 解法 1 :暴力解法 直接按照题目的描述进行,对于数组中的每一个元素,我们找出下雨后水能达到的最高位置,等于两边最大高度较小值减去当前高度的值...说明索引为3的位置不能存储雨水 JS 实现如下: /** * @param {number[]} height * @return {number} */ var trap = function...res }; 解法 2 :双指针 当左边最大挡板<右边最大挡板,左边向前挺近,最终值加上当前左最大挡板-当前左指针所指值(相当于左边只要不超过右边,右边最大挡板稳定兜底,左边无脑挺近累加)大于则反之; JS

33650

QQ天气H5-前端完整解析

下雨下雪,飘云,日光闪烁等动画效果。 ? 在开发手Q天气的时候,学习到许多,发现有许多地方值得写一下。以下是我的总结。...设置 如果希望把所有屏幕大小给考虑进去,可以考虑使用js来计算(天气H5也是使用js来换算),如下面的代码 //设置fontsize var doc = document, win = window...下雨下雪动画 效果如下, 发现使用canvas在绘制这些动画的时候,还是十分方便的。 ? ?...因为提前预先加载cgi能够使我们更快地去渲染页面而不是等先拉取页面js再去执行页面js去请求cgi的这样的顺序。 代码优化 dom对象池复用 在天气内页有个星座slider,如下面 ?...异步加载权重较低的模块 由于整个天气又有折线图,又有动画,又有下雨下雪等东西。因此我们需要对页面进行模块划分。

2.2K30

QQ天气H5-前端完整解析

下雨下雪,飘云,日光闪烁等动画效果。 ? 在开发手Q天气的时候,学习到许多,发现有许多地方值得写一下。以下是我的总结。...设置 如果希望把所有屏幕大小给考虑进去,可以考虑使用js来计算(天气H5也是使用js来换算),如下面的代码 //设置fontsize var doc = document, win = window...下雨下雪动画 效果如下, 发现使用canvas在绘制这些动画的时候,还是十分方便的。 ? ?...因为提前预先加载cgi能够使我们更快地去渲染页面而不是等先拉取页面js再去执行页面js去请求cgi的这样的顺序。 代码优化 dom对象池复用 在天气内页有个星座slider,如下面 ?...异步加载权重较低的模块 由于整个天气又有折线图,又有动画,又有下雨下雪等东西。因此我们需要对页面进行模块划分。

2.8K101

杂记 -- 基于node.js和jenkins以及gitlab的持续集成项目

一个入门级别的hello world持续集成项目 第一步:在gitlab上创建一个git管理的node项目node01,并clone到本地 第二步:创建一个app.js文件,并写入内容console.log...gitlab 构建环境 -> Provide Node & npm bin/ folder to PATH 构建 -> 执行shell echo $PATH node -v npm -v node app.js...这里你多点几下意思下,可以看到如果你点击大于一次的话,它会把后面的加到构建队列里去,可以看到是在master分支上构建的,这里的太阳就是表示你构建成功了,如果是下雨啊乌云啥的那就说明有问题。 ?...至此,我们完成了一个入门级别的基于node.js和Jenkins以及gitlab的持续集成项目从创建到构建的全过程。

49730

将自动通知窗体集成到类中

在IE的右下角自动弹出一个通知窗口,几秒后慢慢消失,这个现在是很常见的js代码实现的功能,但是,我希望能够把这个功能集成起来,使用时尽量简化,所以尝试作了一个类,专门来完成这个功能。        ...因为这是js的功能,而且js代码是可见的,所以,如果有别人实现的好点,可以直接就拿来使用了。我碰到一个页面的通知功能做的还挺不错的,就分析了下代码,发现主要有三部分组成。         ...用js文件固然可以把js代码分开写,但其它的东西使用起来还是麻烦。         ...于是测试了一下,发现它是将插入内容原封不动的插入到页面代码中,所以,它不仅可以插js代码,其它的两种代码也可以。         再测试了一下,样式代码放到body内,发现没有问题。         ...jetz.cnblogs.com/archive/2005/10/01/247966.html         最后,调用就很简单了         NoteWindow.ShowNote(this,"好消息,下雨

81270

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券