html5怎么实现雨滴效果,雨滴效果—

雨点效果——HTML5之特效

drop.html内容如下：

$(document).ready(function(){

});

其中jquery-1.7.2.min.js为jquery文件，引用自己滴

drop.js文件内容如下

(function () {

var canvas = null,

context = null,

drops = [];

function resetCanvas() {

canvas = document.getElementById("simple");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

context = canvas.getContext("2d");

}

function animate() {

context.save();

try {

context.clearRect(0, 0, canvas.width, canvas.height);

context.strokeStyle = "rgba(68,221,255,0.5)";

context.lineWidth = 4;

var ii = 0;

while (ii < drops.length) {

context.beginPath();

//context.rect(drops[ii].x, drops[ii].y, drops[ii].size, drops[ii].size);

context.arc(drops[ii].x, drops[ii].y, drops[ii].size, 0, 2 * Math.PI, false);

context.stroke();

drops[ii].size += 2;

if (drops[ii].size > drops[ii].maxSize) {

drops.splice(ii, 1);

} else {

ii++;

}

} finally {

context.restore();

}

$(window).bind("resize", resetCanvas).bind("reorient", resetCanvas);

$(document).ready(function () {

window.scrollTo(0, 1);

resetCanvas();

document.body.addEventListener("mousedown", function (evt) {

drops.push({

size: 2,

maxSize: 20 + (Math.random() * 50),

x: evt.pageX,

y: evt.pageY

});

evt.preventDefault();

}, false);

setInterval(animate, 40);

});

})();有兴趣的可以试试玩一玩，用支持html5的浏览器打开drop.html，鼠标快速连续点击页面，效果很明显

1楼kunoy昨天 18:01果真不错，学习了。

html5怎么实现雨滴效果,雨滴效果——HTML5之特效相关推荐

如何把HTML转换成动图,html5实现图片转圈的动画效果——让页面动起来
1.先瞧瞧效果: 2.代码是这样的: @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{trans ...
图片动画效果html5,8个实用炫酷的HTML5图片动画应用
原标题:8个实用炫酷的HTML5图片动画应用近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
照片转换为动画 html5,如何使用html5让图片转圈的动画效果
如何使用html5让图片转圈的动画效果发布时间:2020-10-26 09:33:22 来源:亿速云阅读:78 作者:小新如何使用html5让图片转圈的动画效果?这个问题可能是我们日常学习或工作 ...
效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析
本文将为大家分享12个效果奇特的HTML5动画,HTML5强大的动画特性可以让你的网页变得更加生动和富有活力,交互性也会进一步得到提高.一起来看看下面的这些HTML5动画案例,每个案例都提供源代码下载 ...
html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的: 利用html5,css实现钟摆效果知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中: 2) 利用CSS3的animation/transform/ ...
html实现360展示图片,js html5 360度全景图片预览效果
特效描述:js html5 360度全景图片预览效果.html5实现360度全景,html5 720度全景图,html5全景图,html5全景图源代码,html5 3d全景,360度全景图,3d36 ...
html5 游戏动画设计,11款效果惊艳的HTML5动画应用
11款效果惊艳的HTML5动画应用来源:极客头条 HTML5真的很棒,我们这个网站也每天在为大家分享很多炫酷而实用的HTML5和CSS3应用.今天要分享的有很多效果惊艳而且好玩的HTML5动画应用, ...
2022跨年烟花代码（九）HTML5夜景放烟花绽放动画效果
HTML5夜景放烟花绽放动画效果 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
html画布实现小球沿直线下落,js+html5实现的自由落体运动效果代码
本文实例讲述了js+html5实现的自由落体运动效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: /p> "http://www.w3.org/TR/xhtm ...

html5怎么实现雨滴效果,雨滴效果——HTML5之特效

html5怎么实现雨滴效果,雨滴效果——HTML5之特效相关推荐

最新文章

热门文章