You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.4 KiB
42 lines
1.4 KiB
//- 下雨UI
|
|
canvas(id="snow") 不支持canvas
|
|
style
|
|
| canvas#snow { position: absolute; z-index: -1; top: 0; left: 0; opacity: 0.5; }
|
|
script(type="text/javascript", src="https://code.jquery.com/jquery-3.6.0.min.js")
|
|
script
|
|
| $(function () {
|
|
| var W = $(window).width(),
|
|
| H = $(window).height(),
|
|
| x2 = -15, len = 30, count = 100;
|
|
| var canvas = document.getElementById("snow");
|
|
| canvas.width = W;
|
|
| canvas.height = H;
|
|
| var ctx = canvas.getContext('2d');
|
|
|
|
|
| setInterval(clearCanvas,100);
|
|
| function clearCanvas() {
|
|
| ctx.clearRect(0, 0, W, H);
|
|
| draws();
|
|
| }
|
|
|
|
|
| function draw(x, y) {
|
|
| //canvas写渐变：createLinearGradient（startX,startY,endX,endY）
|
|
| var grd = ctx.createLinearGradient(x, y, x + x2, y + len);
|
|
| grd.addColorStop(0, "rgba(0,0,0,0)");
|
|
| grd.addColorStop(0.5, "rgba(105,105,105,1)");
|
|
| grd.addColorStop(1, "rgba(255,255,255,1)");
|
|
| ctx.strokeStyle = grd;
|
|
|
|
|
| ctx.beginPath();
|
|
| ctx.moveTo(x, y);
|
|
| ctx.lineTo(x + x2, y + len);
|
|
| ctx.lineWidth = 2;
|
|
| ctx.stroke();
|
|
| ctx.closePath();
|
|
| }
|
|
| function draws() {
|
|
| for (var i = 1; i <= count; i++) {
|
|
| draw(Math.random() * W, Math.random() * H);
|
|
| }
|
|
| }
|
|
|});
|