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

web前端开发是做什么

前端开发中的同源是什么意思

前端开发都用什么工具

html 代码片段

<!DOCTYPE html>

<html>

<head>

<style>

html,body{padding: 0; margin: 0; width: 100%; height: 100%; background: #012;font-size: 0; line-height: 0}

</style>

</head>

<body>

<defs>

</defs>

<defs>

s </linearGradient>

</linearGradient>

</polygon>

</clipPath>

</defs>

<!– 灯塔和灯柱 –>

<g>

<!– 旋转的灯光 –>

<g>

<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>

<!– 绘制月亮 –>

<defs>

</mask>

</defs>

</g>

</svg>

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绘制蓝色星空，月亮，旋转灯塔

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发