MDN--canvas--画一些随机的星星

最新推荐文章于 2025-05-29 03:06:22 发布

xing__huo

最新推荐文章于 2025-05-29 03:06:22 发布

阅读量234

点赞数

文章标签： canvas

本文链接：https://blog.youkuaiyun.com/qq_45628731/article/details/110007860

版权

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="f" width="200" height="200"></canvas>
		<script src="2.js"></script>
	</body>
</html>

这是JS的

(function(){
	// 画星星
	function drawStar(ctx,r){
		ctx.beginPath();
		ctx.fillStyle = '#fff';
		ctx.moveTo(r,0);
		for(var i = 0; i < 9; i++){
			ctx.rotate(Math.PI/5);
			if(i%2==0){
				ctx.lineTo((r/0.525731)*0.200811,0);
			}else{
				ctx.lineTo(r,0);
			}
		}
		ctx.fill();
	}
	
	var ctx = document.querySelector('#f').getContext('2d');
	ctx.fillRect(0,0,200,200);
	
	// 创建裁切路径
	ctx.beginPath();
	ctx.arc(100,100,90,0,Math.PI*2,true);
	ctx.clip();
	
	// 设置背景
	var linner = ctx.createLinearGradient(0,0,0,200);
	linner.addColorStop(0,'#232256');
	linner.addColorStop(1,'#1d52b3');
	ctx.fillStyle = linner;	
	ctx.fillRect(0,0,200,200);
	
	// 随机生成50个星星
	for(var i = 0; i < 50; i++){
		ctx.beginPath();
		ctx.save();
		ctx.translate(Math.floor(Math.random()*200),Math.floor(Math.random()*200));
		drawStar(ctx,Math.random()*4+2);
		ctx.restore();
	}
})();