前端开发svg绘制蓝色星空,月亮,旋转灯塔

web前端开发是做什么
前端开发中的同源是什么意思
前端开发都用什么工具

html 代码片段

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <title></title>
    <style>
html,body{padding: 0; margin: 0; width: 100%; height: 100%; background: #012;font-size: 0; line-height: 0}
</style>
</head>
<body>
    <svg width=”100%” height=”100%” preserveAspectRatio=”xMinYMin slice”>
        <defs>
            <polygon id=”star” points=”0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2″ fill=”white” />
        </defs>
        <g id=”star-group”></g>
            <g id=”ligth-tower” transform=”translate(300 200)”>
                <defs>
                    <linearGradient id=”gradient_1″ x1=”0″ y1=”0″ x2=”1″ y2=”0″>
                        <stop offset=”0″ stop-color=”rgba(255,255,255,0.6)” />
                        <stop offset=”1″ stop-color=”rgba(255,255,255,0.9)” />
                s   </linearGradient>
                    <linearGradient id=”gradient_2″ x1=”0″ y1=”0″ x2=”1″ y2=”0″>
                        <stop offset=”0″ stop-color=”rgba(255,255,255,0.2)” />
                        <stop offset=”1″ stop-color=”rgba(255,255,255,1)” />
                    </linearGradient>
                    <clipPath id=”clipPath-1″>
                        <polygon points=”0 -40 800 0 0 40″ transform=”translate(-800 -60)” />
            </polygon>
            </clipPath>
            </defs>
            <!– 灯塔和灯柱 –>
            <g>
                <polygon points=”-10 0 10 0 0 -60″ fill=”url(#gradient_1)” />
                <circle r=”3″ cx=”0″ cy=”-60″ fill=”white” />
                <!– 旋转的灯光 –>
                <g>
                    <ellipse rx=”300″ ry=”150″ cx=”0″ cy=”-60″ fill=”url(#gradient_2)” clip-path=”url(#clipPath-1)” />
                    <animateTransform from=”0 0 -60″ to=”360 0 -60″ type=”rotate” dur=”10s” repeatCount=”indefinite” attributeName=”transform”
                     begin=”0s”>
                    </animateTransform>
                    <!– from=”0,x,y” to=”360,x,y” X,Y就是你的坐标 –>
                </g>
            </g>
            </g>
            <!– 绘制月亮 –>
            <g id=”moon”>
                <defs>
                    <mask id=”mask-moon”>
                        <circle r=”100″ cx=”-600″ cy=”-250″ fill=”white” />
                        <circle r=”100″ cx=”-550″ cy=”-290″ fill=”black” />
                    </mask>
                </defs>
                <circle r=”100″ cx=”-600″ cy=”-250″ fill=”yellow” mask=”url(#mask-moon)” />
            </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’);
        var starCount =500;
        var width =document.body.clientWidth;
        var height =document.body.clientHeight;
        var star;
        renderStar()
            setSVGViewBox()
            //绘制星星
            function renderStar() {
                var starRef =document.querySelector(‘#star’);
                var starGroup =document.querySelector(‘#star-group’);
                while (starCount–) {
                    star =use(starRef);
                    star.setAttribute(‘transform’,’translate(‘+random(-width /2, width /2)+’,’+random(-height /2, height /2)+’)’+’scale(‘+random(0.1,0.8)+’)’);
                    star.setAttribute(‘opacity’,random(0.1,0.7))
                        starGroup.appendChild(star)
}
            }
            //js加载use方法
            function use(origon) {
                var _use =document.createElementNS(SVG_NS,’use’);
                _use.setAttributeNS(XLINK_NS,’xlink:href’,’#’+ origon.id)
return _use
}
            //大小数之间的随机
            function random(min, max) {
                return min +(max – min)*Math.random();
            }
            //设置svg的宽高
            function setSVGViewBox() {
                paper.setAttribute(‘viewBox’,-width /2+”+(-height /2)+”+ width +”+ height)
                    console.log(paper.getAttribute(‘viewBox’));
            }
    </script>
</body>
</html>

根本慕课网视频制作的,纯粹是当作一个记录,在这个DEMO中,涉及到了许多SVG的知识,基本适口的设置、绘图API、clip-path、mask蒙板的使用、animateTransform动画;

前端开发后端开发是什么意思
微信小程序前端用什么开发
前端开发的组件是什么
» 本文来自:前端开发者 » 《前端开发svg绘制蓝色星空,月亮,旋转灯塔》
» 本文链接地址:https://www.rokub.com/7400.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!