canvas 实现一片星空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
		<style>
			
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1200" height="800"></canvas>       <!-- 规定画布大小,不要写在style中。 -->
		<script>		
			window.onload = function(){                               //加载画布
				var canvas = document.getElementById('canvas');		  //获取画布
				var context = canvas.getContext("2d");				  //画布上下文环境
				
				var skyStyle=context.createLinearGradient(0,0,0,canvas.height);   // 创建渐变
				skyStyle.addColorStop(0,"black");
				skyStyle.addColorStop(1,"#035");	 
				
				context.fillStyle=skyStyle;                           // 填充渐变
				context.fillRect(0,0,canvas.width,canvas.height);     //填充区域
				
				for(var i = 0;i<200;i++){                             //绘制星星的随机数变量设置
					var r = Math.random()*5+5;
					var x = Math.random()*canvas.width;
					var y = Math.random()*canvas.height*0.65;         //0.65规定显示区域在百分之六十五区域内显示
					var a = Math.random()*360;                        //旋转角度的随机值
					drawStar(context , x, y, r , a);                  //传入绘制星星的函数
				}
				
				fillMoon(context,2,900,150,60,30);				      //传入页面绘制各个元素的函数,需要上层显示的函数应放在其他函数之后执行
				drawLand(context);
				Text(context);                                        //函数越下方,显示层级越高
			}
						
			function Text(context){                                   //绘制显示文本函数
				context.font = "bold 36px Arial"                      //规定字体样式
				
				var gradient=context.createLinearGradient(0,0,200,0); //规定字体填充渐变色
				gradient.addColorStop("0","#fb3");
				gradient.addColorStop("1","#058");				
				
				context.fillStyle = gradient;                         //为字体填充颜色,变量赋值不需要加双引号,颜色需要加
				context.fillText("一片星空",40,700,300);               //绘制显示实体文字。相对于画布距左40,距上700,最大宽度300
				context.strokeStyle=gradient;                          
				context.strokeText("一片星空",40,700,300);             //绘制显示空心文字。相对于画布距左40,距上700,最大宽度300
				
				context.lineWidth=100;                                 //线条宽度
				context.textAlign = "left";                            //字体左右居中位置
				context.textBaseline = "middle";                       //字体上下居中位置
			}	
			
			function drawLand( ctx ){                                 //绘制草坪函数
				ctx.save();                                           //保存当前图像状态的一份拷贝。
				ctx.beginPath();                                      //在一个画布中开始子路径的一个新的集合
				ctx.moveTo(0,600);                                    //开始路径的坐标,不创建线条
				ctx.bezierCurveTo(540,400,660,800,1200,600);          //三次贝塞尔曲线(控制点一的X,一的Y,控制点二的X,二的Y,结束坐标X,y)
				ctx.lineTo(1200,800);                                 //创建两点之间的路径
				ctx.lineTo(0,800);
				ctx.closePath();                                      //创建从当前点回到起始点的路径。
				
				var landStyle = ctx.createLinearGradient(0,800,0,0);     //线性渐变(渐变开始点的x,y,渐变结束点的x,y)
				landStyle.addColorStop(0.0,'#030');
				landStyle.addColorStop(1.0,'#580');
				ctx.fillStyle=landStyle;                              //填充渐变色
				ctx.fill();                                          //填充当前绘图
				
				ctx.restore();                                       //返回之前保存过的路径状态和属性。
			}
				
			function drawStar(ctx,x,y,R,rot,fillColor){               //绘制星星的函数
				ctx.save();                                           //保存当前图像状态的一份拷贝。
				ctx.translate(x,y);   //在位置 (0,0 处绘制一个矩形,将新的 (0,0) 位置设置为 (x,y)。再次绘制新的矩形(请注意现在矩形从位置 (x+0,y+0) 开始绘制):
				ctx.rotate(rot/180*Math.PI);          //旋转当前绘图
				ctx.scale(R,R);                       //缩放当前绘图的大小(width倍数,height倍数)(1=100%,0.5=50%,2=200%,依次类推)
				starPath(ctx);                        //绘制及样式函数
				
				ctx.fillStyle = fillColor || '#fb3';       //填充色
				ctx.fill();                                //填充当前绘图
				ctx.restore();                             //返回之前保存过的路径状态和属性。
			}	
			function starPath(ctx){                         //绘制函数
			
				ctx.beginPath();                          //在一个画布中开始子路径的一个新的集合
				for(var i =0; i<5;i++){
					ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI),         //添加一个新点,然后在画布中创建从该点到最后指定点的线条。
							 -Math.sin((18 + i*72)/180* Math.PI));
					ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI)*0.5,
							 -Math.sin((54 + i*72)/180* Math.PI)*0.5);
				}
				ctx.closePath();                      //创建从当前点回到起始点的路径。
				// ctx.lineWidth = 3;
			}
				
			function fillMoon(ctx,d,x,y,R,rot,fillColor){         //绘制月亮
				ctx.save();                                       //保存当前图像状态的一份拷贝。
				ctx.translate(x,y);//在位置 (0,0 处绘制一个矩形,将新的 (0,0) 位置设置为 (x,y)。再次绘制新的矩形(请注意现在矩形从位置 (x+0,y+0) 开始绘制):
				ctx.rotate(rot*Math.PI/180);              //旋转当前绘图
				ctx.scale(R,R);             //缩放当前绘图的大小(width倍数,height倍数)(1=100%,0.5=50%,2=200%,依次类推)
				pathMoon(ctx,d);            //月亮样式及路径绘制
				ctx.fillStyle = fillColor || "#fb5";          //填充色
				ctx.fill();                               //填充当前绘图
				ctx.restore();                            //返回之前保存过的路径状态和属性。
			}
			
			function pathMoon(ctx,d){                        //月亮绘制
				ctx.beginPath();                             //在一个画布中开始子路径的一个新的集合
				ctx.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);  //方法创建弧/曲线(用于创建圆或部分圆)。(圆心X,圆心Y,半径,起始弧度,结束弧度,顺逆时针)
				                                              //顺时针false,逆时针true     (绘制外弧)
				ctx.moveTo(0,-1);                             //开始路径的坐标,不创建线条
				ctx.quadraticCurveTo(1.2,0,0,1);              //二次贝塞尔曲线(控制点X,控制点Y,结束点X,结束点Y)    (绘制内圆)
				// ctx.arcTo(d,0,0,1,dis(0,-1,d,0)/d);       //在画布上创建介于两个切线之间的弧/曲线
				                                   //arcTo参数(两切线交点的横坐标,纵坐标,第一条切线上一点的横坐标,第二条切线上一点的纵坐标,弧的半径)
				ctx.closePath();                              //创建从当前点回到起始点的路径。
			}
			// function dis(x1,y1,x2,y2){                        //用arcTo()计算弧度半径时,需要计算两点之间的距离,用两点间距离公式
			// 	return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
			// }		
		</script>
	</body>
</html>

发布了5 篇原创文章 · 获赞 2 · 访问量 1468
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览