canvas 星空

最新推荐文章于 2024-06-28 16:03:48 发布

laxexue

最新推荐文章于 2024-06-28 16:03:48 发布

阅读量310

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/laxexue/article/details/84588373

版权

canvas 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"></canvas>
</body>
</html>

window.onload = function(){
		var canvas = document.getElementById('canvas');

		canvas.width = 800;
		canvas.height = 800;
		var context = canvas.getContext('2d');
		
		context.fillStyle = 'black';
		context.fillRect(0,0,canvas.width,canvas.height);
		for (var i = 0; i < 100; i++) {
			var r = Math.random()*10+10;
			var x = Math.random()*canvas.width;
			var y = Math.random()*canvas.height;
			var a = Math.random()*360;
			drawStar(context,r,x,y,a);
		}
	}
	/*
		图像变换
		位移 translate(x,y) 多个使用会叠加
		旋转rotate(deg);
		缩放 scale(sx,sy) 不仅仅是大小发生变化，图片的起始坐标，边框的宽度都会发生变化

		save() 保存状态
		restore()
	*/
	function drawStar(cxt,r,x,y,rot){
		
		//绘制出在（x,y），大小为r，旋转为rot的五角星
		cxt.save();

		cxt.translate(x,y);
		cxt.rotate(rot);
		cxt.scale(r,r);

		starPath(cxt);

		cxt.fillStyle = '#fb3';
		//cxt.strokeStyle = '#fd5';
		//cxt.lineWidth = 3;
		//cxt.lineJoin = 'round';

		cxt.fill();
		//cxt.stroke();

		cxt.restore();

		
	}
	function starPath(cxt){
		cxt.beginPath();
		for (var i = 0; i < 5; i++) {
			cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),-Math.sin((18+i*72)/180*Math.PI));
			cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5);
			
		}
		
		cxt.closePath();
	}

laxexue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 星空

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:
复制链接

扫一扫

专栏目录