canvas绘制星空
2024-06-07 17:00:45
无图不欢，先上图
<!DOCTYPE html><html><head><title></title><style>*{margin:0;padding:0;}</style> </head><body></body><script type="text/javascript">class FwhfStarrySky{constructor(){this.canvas = '';this.context = '';this.timer = null;this.mountainArr = [];this.starArr = [];this.meteorArr = [];this.width = window.innerWidth;this.height = window.innerHeight;this.init();}init(){document.body.innerHTML += "<canvas id='fwhfCanvas'></canvas>";this.canvas = document.getElementById('fwhfCanvas');this.canvas.width = this.width;this.canvas.height = this.height;this.canvas.style.display = 'block';this.context = this.canvas.getContext('2d');var drawMountainX = 0;while(drawMountainX < this.width){if(this.rand(1,2) == 1){this.mountainArr.push([drawMountainX,this.rand(this.height-70,this.height-50),drawMountainX-this.rand(15,25),this.height-60]);}else{this.mountainArr.push([drawMountainX,this.rand(this.height-70,this.height-50)]);}drawMountainX += this.rand(10,30);}var ladder = 0;while(ladder < this.height-300){for(var i = 0 ; i < (this.height-ladder)/100 ; i++){this.starArr.push([this.rand(0,this.width),this.rand(ladder,ladder+20),this.rand(0,10),0.1]);}ladder += 20;}this.drawTimer();}drawSky(){this.context.beginPath();var skyStyle = this.context.createLinearGradient(0,0,0,this.canvas.height);skyStyle.addColorStop(0,"#000211");skyStyle.addColorStop(0.3,"#080d23");skyStyle.addColorStop(0.7,"#18203d");skyStyle.addColorStop(1,"#293756");this.context.fillStyle = skyStyle;this.context.fillRect(0,0,this.width,this.height);this.context.closePath();}drawMountain(){this.context.beginPath();this.context.fillStyle = '#111';this.mountainArr.forEach((v)=>{if(v.length == 4){this.context.quadraticCurveTo(v[2],v[3],v[0],v[1])}else{this.context.lineTo(v[0],v[1]);}});this.context.lineTo(this.width,this.height-60);this.context.lineTo(this.width,this.height);this.context.lineTo(0,this.height);this.context.fill();this.context.closePath();}darwStar(){this.starArr.forEach((v)=>{this.context.beginPath();this.context.fillStyle = "rgba(255,255,255,"+v[2]/10+")"; this.context.arc(v[0],v[1],1,0,2*Math.PI);this.context.fill();this.context.closePath();});}drawMoon(){this.context.beginPath();var MoonStyle = this.context.createRadialGradient(300,150,38,300,150,50);MoonStyle.addColorStop(0,'rgba(255,255,255,1)');MoonStyle.addColorStop(1,'rgba(255,255,255,0)');this.context.fillStyle = MoonStyle; this.context.arc(300,150,50,0,2*Math.PI);this.context.fill();this.context.closePath();}drawMeteor(){var meteorNum = this.rand(-9,9);if(meteorNum == 1){this.meteorArr.push([this.rand(0,this.width+this.height),0,this.rand(1,3)]);}this.meteorArr.forEach((v)=>{this.context.beginPath();this.context.fillStyle = "rgba(255,255,255,1)";if(v[0] > this.width){this.context.arc(v[0],v[1]+(v[0]-this.width),1,0,2*Math.PI);}else{this.context.arc(v[0],v[1],1,0,2*Math.PI);}this.context.fill();if(v[0] > this.width){var meteorStyle = this.context.createLinearGradient(v[0],v[1],v[0]+v[2]*20,v[1]+(v[0]-this.width)-v[2]*20);meteorStyle.addColorStop(0,"rgba(255,255,255,1)");meteorStyle.addColorStop(1,"rgba(255,255,255,0)");this.context.strokeStyle = meteorStyle;this.context.lineTo(v[0],v[1]+(v[0]-this.width));this.context.lineTo(v[0]+v[2]*20,v[1]+(v[0]-this.width)-v[2]*20);}else{var meteorStyle = this.context.createLinearGradient(v[0],v[1],v[0]+v[2]*20,v[1]-v[2]*20);meteorStyle.addColorStop(0,"rgba(255,255,255,1)");meteorStyle.addColorStop(1,"rgba(255,255,255,0)");this.context.strokeStyle = meteorStyle;this.context.lineTo(v[0],v[1]);this.context.lineTo(v[0]+v[2]*20,v[1]-v[2]*20);}this.context.stroke();this.context.closePath();})this.meteorArr.forEach((v,index)=>{v[0] -= v[2];v[1] += v[2];if(v[0] < -20 || v[1] > this.height){this.meteorArr.splice(index,1);}})}drawTimer(){this.drawSky();this.darwStar();this.drawMoon();this.drawMeteor();this.drawMountain();this.timer = setInterval(()=>{this.starArr.forEach((v)=>{if(v[2] + v[3] < 0 || v[2] + v[3] > 10){v[3] *= -1;}v[2] += v[3];});this.drawSky();this.darwStar();this.drawMoon();this.drawMeteor();this.drawMountain();},20)}rand(min,max){var c = max - min + 1;return Math.floor(Math.random() * c + min);}} new FwhfStarrySky(); </script>
</html>
canvas绘制星空相关推荐
- canvas绘制星空（起手篇）
无图不欢,先上图 <!DOCTYPE html> <html><head><meta name="keywords" content=&q ...
- canvas绘制星空底图
canvas的初始化就没写了,仅写地图实现过程,长宽均为420 //星空图底图function drawBaseSky(tempcxt){tempcxt.clearRect(0,0,420,420); ...
- html画星空,html5 canvas绘制全屏的星空背景动画特效
特效描述:html5 canvas绘制 全屏星空背景 动画特效.html5 canvas背景动画,星空动画.连线区域跟随鼠标移动,外加碰壁检测 代码结构 1. 引入JS 2. HTML代码 var m ...
- canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
- html制作星空,HTML5绘制星空
HTML5绘制一个很丑的星空 canvas{display: block;border:1px dotted skyblue;} HTML5绘制星空 var nimo={}; window.οnlοa ...
- canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
- HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
- canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
- canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...
最新文章
- seaborn使用axes_dict函数获取displot函数生成的图像所有标题信息、使用set_title函数自定义设置多面板直方图标题（Multi-panel histogram‘s title)
- 修改科技论文的6项注意
- CDN视频存储解决方案
- 移动产品经理必须要知道的11件事
- Adobe Air 写文件如何换行
- C++编程中的四个调试小技巧
- Linux定时备份Oracle Database 翻译
- Dapper的语法应用
- 网络编程之-----------进程
- 如何使用开源工具制作YouTube系列
- python批量删除数据库记录_GitHub - TracyMcgrady6/pymsql_Operation: Python3操作mysql数据库，实现增、批量增、删、改、查...
- Java实习日记（3）
- 需求分析中系统参与者的概念和确定
- Markdown 中 LaTex 数学公式命令
- 咱们也真够疯狂的。。
- 惠花生活小礼盒v2.0.1
- 《云原生入门级开发者认证》学习笔记之云原生基础设施之Kubernetes(三)
- Redis与传统sql数据库的区别
- 数据窗口控件的函数Describe()
- Linux学习：sheel编程