canvas下雨

Html

Css

body {
	margin:0;
	padding:0;
}
canvas {
	display:block;
}

$(function() {
     var canvas = document.getElementById('canvas');
     var PI = Math.PI;
     var total = 8;
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'rgba(50,96,139,.8)';
     ctx.lineWidth = 2;
     //雨滴
     var arr = [];
     setInterval(function() {
         var x = Math.random() * (canvas.width - 14) + 14;
         var y = 0;
         var x2 = x - 15;
         var y2 = 30;
         arr.push({
             x: x,
             y: y,
             x2: x2,
             y2: y2
         })
     }, 25)

function yudi() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         var myGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
         myGradient.addColorStop(0, 'rgba(9,13,38,.95)');
         myGradient.addColorStop(1, "rgba(33,18,6,.9)");
         ctx.fillStyle = myGradient;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
         $.each(arr, function(i, m) {
             if (m) {
                 ctx.beginPath();
                 ctx.moveTo(m.x, m.y);
                 ctx.lineTo(m.x2, m.y2);
                 ctx.stroke();
                 m.x -= 5;
                 m.y += 10;
                 m.x2 = m.x - 15;
                 m.y2 = m.y + 30;
                 if (m.y2 > canvas.height) {
                     ctx.beginPath();
                     ctx.fillStyle = 'rgba(50,96,139,1)';
                     for (var j = 0; j < total; j++) {
                         var p = Math.random() * (m.x2 + 40 - (m.x2 - 40) + 1) + (m.x2 - 40); //水平扩散
                         var f = Math.random() * (canvas.height - (canvas.height - 40) + 1) + (canvas.height - 50) //垂直扩散
                         var ground = Math.random() * 3;
                         ctx.beginPath();
                         ctx.arc(p, f, ground, 0, 2 * PI);
                         ctx.fill();
                     }

arr.splice(i, 1);
                 }
             }
         });
         // ctx.save();

window.requestAnimationFrame(yudi);
     }
     window.requestAnimationFrame(yudi);
 })

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.1

立即下载

canvas下雨



代码描述：canvas模仿下雨效果

3

最新

发表评论全部评论

暂时没有评论！

TaoGG0

2018/5/31 12:00:24

怎么在中间添加一个按钮啊,急求,谢谢

西瓜0

2018/5/31 16:21:58

css作一个浮动层在上面就行了

TaoGG0

2018/6/1 13:34:44

好，谢谢

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

流年里的时光ZY

相关代码

canvas下雨

最新