梦幻星空html,如何使用HTML5的canvas来画一个梦幻星空，快来学习一下吧

前言

随着HTML5的火热，越来越多的人投入到HTML5开发中了，canvas作为HTML5中比较重要的一个元素，在很多官网的主页面中被使用到。今天我们一起来看看如何使用canvas画出一个梦幻的星空背景，还会有流星运动。

本文的代码已经放到Github上了，感兴趣的可以自取，Github地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/starry/starry.html

HTML5

实现效果

首先我们来看看通过canvas实现的星空效果图，如下所示。

效果图

代码实现

接下来我们看看这个效果是如何通过代码一步步实现的。

首先来看看页面上的HTML代码，只有一个Div元素。

HTML代码

Javascript代码

首先我们需要定义一些常量，比如画布的宽和高，星星数量，流星个数。在这个星空中流星其实是星星的一个，只是添加了动态效果。

页面初始化

然后是设定一个定时器，通过一段随机时间生成一个流星的索引号。

流星索引号

紧接着来看看生成一个星星的方法，该方法返回一个星星的各项参数，包括x,y轴坐标，透明度，x,y轴偏移量。

生成星星的参数

然后是最重要的render方法，通过该方法可以将星星渲染至画布上，我们将这个方法拆开看，首先是对流星的绘制，流星索引号通过上面metor方法获得。

画流星

然后是对于星星各项参数的处理，比如有的星星生成的点坐标超出了屏幕宽高，有的透明度是负数，都要将其处理成正常参数。

各项参数判断

最后是在画布中进行绘制。

画布绘制

至此，这个画面效果的讲解完毕，如果代码正确的话，就可以看到文中出现的效果图。

结束语

今天这篇文章主要是借助HTML5中的canvas画出了一个梦幻星空的效果，你学会了吗？

梦幻星空html,如何使用HTML5的canvas来画一个梦幻星空，快来学习一下吧 | 龙奔网...相关推荐

html页面画虚线,HTML5中canvas怎么画虚线
HTML5中canvas如何画虚线虚线也可以看成是一段段的实线组成的,而实线是利用context.moveTo(x,y);context.lineTo(x2,y2);context.stroke() ...
canvas 画点_css+canvas 随便画一个星空
今天躺在床上刷抖音的时候,看见了一个马克笔随便画星空的视频,很有意思. 先看效果: 开始需求分析: 1.渐变色的背景 2.画一颗树和一些草 3.水面的倒影 4.随便画点星星 5.画一颗流星 1.渐变色 ...
html中间一条虚线怎么画,【html5】HTML5中canvas怎样画虚线
在canvas API中,我们发现仅仅提供了画实线的方法实现,并没有虚线的相关方法,那么怎样实现画虚线呢? 现实中,虚线是由一小段小段的实线线段组成,那么仅仅要我们通过画出等长度的线段就能够组成我们想 ...
canvas笔记-画一个五角星（含算法）
算法如下: 上面的图是正三角形: 说下算法,关于上面那些x,y是怎么算出来的. 这里大圆的5个顶点,每个顶点占用的角度为360/5 = 72度,左边那个18度是通过90 - 72 = 18度. 大圆半 ...
html5 骰子滚动,CSS3画一个滚动的骰子
今天利用CSS3来画一个自动滚动的骰子. 思路:骰子的六个面分别用六个ul标签,每个面的点数就是li标签,点数的排列采用伸缩布局,然后采用定位和transform属性将六个面翻转折叠成立方体. 1.H ...
HTML5 使用canvas实现画板功能(画笔颜色切换、粗细调整、清除图像)
标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形. 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. HTML5 元素用于图形的绘制,通过脚本 (通常是Java ...
HTML5基于canvas的网页绘画系统
绘画是一种在平面上以手工方式临摹自然或非自然,以其达到二维(平面或三维)效果的艺术,在中世纪的欧洲,常把绘画称作"猴子的艺术",因为如同猴子喜欢模仿人类活动一样,绘画也是模仿场景. ...
【不可思议的CANVAS】画一只会跟着鼠标走的小狗
点击上方"IT平头哥联盟",选择"置顶或者星标" 你的关注意义重大! 以前经常看到这种效果:在网页右下角放一个人,然后他的眼珠会跟着鼠标转,效果如下: 这个例子 ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

梦幻星空html,如何使用HTML5的canvas来画一个梦幻星空，快来学习一下吧 | 龙奔网...

梦幻星空html,如何使用HTML5的canvas来画一个梦幻星空，快来学习一下吧 | 龙奔网...相关推荐

最新文章

热门文章