使用svg（1）-画一张星空背景图

github网址：https://github.com/xuhuihui/svg

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html, body {margin: 0;padding: 0;width: 100%;height: 100%;background: #001122;line-height: 0;font-size: 0;}</style>
</head>
<body><svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice"><!-- 星星 --><defs><polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon></defs><!-- 湖面部分 --><g id="real"><!-- 星星背景 --><g id="star-group" width="100%" height="80%"></g><!-- 月亮部分 --><g id="moon-group"><!-- 创建蒙版，显示月牙部分 --><mask id="moon-mask"><circle cx="-250" cy="-150" r="100" fill="white"></circle><circle cx="-200" cy="-200" r="100" fill="black"></circle></mask><!-- 月亮 --><circle cx="-250" cy="-150" r="100" fill="yellow" mask="url(#moon-mask)"></circle>      </g>      <!-- 灯塔部分 -->      <g id="light-tower" transform="translate(250,0)">        <defs>          <!-- 灯塔的颜色，线性渐变 -->          <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">            <stop offset="0" stop-color="#999"></stop>            <stop offset="1" stop-color="#333"></stop>          </linearGradient>          <!-- 灯光的颜色，径向渐变 -->          <radialGradient id="light" cx="0.5" cy="0.5" r="0.5">            <stop offset="0" stop-color="rgba(255,255,255,.8)"></stop>            <stop offset="1" stop-color="rgba(255,255,255,0)"></stop>          </radialGradient>          <!-- 光圈三角形路径 -->          <clipPath id="light-clip">            <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,.5)">              <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"></animateTransform> </polygon><!-- 灯光发射点 --><circle cx="0" cy="0" r="2"></circle></clipPath></defs><!-- 灯塔 --><polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon><!-- 灯光 --><ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-clip)"></ellipse></g></g><!-- 绘制反射,倒影部分 --><g id="reflact" transform="translate(0,50)" mask="url(#fading)"><defs><!-- 倒影的颜色，线性渐变 --><linearGradient id="fade" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="rgba(255,255,255,0.3)"></stop><stop offset="0.5" stop-color="rgba(255,255,255,0)"></stop></linearGradient><mask id="fading"><!-- 倒影 --><rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect></mask></defs><use xlink:href="#real" transform="scale(1,-1) translate(0,-50)"></use><line x1="-400" y1="0" x2="400" y2="0" stroke="white"></line></g></svg><script>var SVG_NS = 'http://www.w3.org/2000/svg';var XLINK_NS = 'http://www.w3.org/1999/xlink';var paper = document.querySelector('svg');renderStar();    // 创建引用的use标签function use(origin) {var _use = document.createElementNS(SVG_NS, 'use');_use.setAttributeNS(XLINK_NS, 'xlink:href', '#' + origin.id);return _use;}// 产生最大值最小值之间的随机数随机数function random(min, max) {return min + (max - min) * Math.random();}function renderStar() {var starRef = document.getElementById('star');// console.log(starRef)var starGroup = document.getElementById('star-group');var starCount = 500;var star;while (starCount--) {star = use(starRef);//改变透明度，位置和大小star.setAttribute('opacity', random(0.1, 0.4));star.setAttribute('transform', 'translate(' + random(-400, 400) + ',' + random(-300, 300) + ')'+ 'scale(' + random(0.1, 0.6) + ')');starGroup.appendChild(star); //添加星星}}</script>
</body>
</html>

使用svg（1）-画一张星空背景图相关推荐

vue3 canvas 星空背景图
vue3 canvas 星空背景图页面截图代码页面截图代码 <template><div ref="container" class="cont ...
php星空背景动态,angular2 绘制星空背景图
制作一个星空背景动图 import {Component, OnInit, HostListener} from "@angular/core"; @Component({ sel ...
SVG公众号排版『大尺寸背景图重复安卓不显示』解决方法
今天懂点君给大家分享一个兼容问题,大尺寸背景图平铺/重复在安卓微信上不能正常显示,也就是背景图显示不出来. 一开始我是猜测跟平铺/重复没有关系,是图片尺寸太大导致背景图不显示,具体咱们来看如下案例. ...
[ 利器篇 ] - 快速画一张UML序列图
最近几个项目组的团队进行沟通,有APP交付组的,也有嵌入式设备的交付组,还有云端开发的交付组.几个组一起实现一个涉及APP / Device / Cloud 功能开发,开完讨论会之后,如何用一张图画出 ...
【沧海拾昧】用MATLAB画一张简单的图
#C0401 沧海茫茫千钟粟,且拾吾昧一微尘 --<沧海拾昧集>@CuPhoenix [阅前敬告] 沧海拾昧集仅做个人学习笔记之用,所述内容不专业不严谨不成体系如有问题定为本集记录有谬, ...
在线作图|2分钟画一张堆叠面积图
Question 1:什么是堆叠面积图? 堆叠面积图属于面积图的一种,显示每个数值所占大小随时间或类别变化的趋势线,可强调某个类别交于系列轴上的数值的趋势线.每一个变量的起点不同,依次在前一个变量的数 ...
android星空背景实现,一个Android自定义背景视图，通过触摸绘制类星空背景图
/** * Created by lz on 2016/7/24. * github地址:https://github.com/lzuntalented/BackgroundView * 自定义背景视 ...
vue 星空背景图组件
摘下星星送给你个人的博客网站背景有点单调不想要枯燥的白色背景然后么自己写了个星空图先封装成vue组件后期去折腾下,换博客的背景可以设置星星个数(默认25).星星颜色.线条颜色废话不多说, ...
PHP将图片和文字合成到一张背景图上
PHP将图片和文字合成到一张背景图上 /*** 将两张图片合成一张* $bg_path 背景图地址* $poster 图片2* $x 图片2在背景图片上位置的左边距,单位:px (例:436)* $y ...

使用svg（1）-画一张星空背景图

使用svg（1）-画一张星空背景图相关推荐

最新文章

热门文章