基于canvas画布的星空效果

使用canvas实现的星空特效

最新推荐文章于 2025-10-09 15:40:34 发布

原创

最新推荐文章于 2025-10-09 15:40:34 发布 · 1.6w 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发 #javascript #Web前端 #canvas #插件

本文介绍了如何利用canvas标签在Web前端创建出星空效果。由于canvas在旧版IE浏览器中不兼容，所以这种特效会牺牲一定的兼容性。作者分享了一个基于canvas的星河插件，对源代码进行了整合和封装，提供了更多自定义参数选项。实现过程中，需要引入jQuery和cosmos_canvas.js文件，若浏览器不支持canvas，则无法显示效果。

canvas是html5的新标签，其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的，所以呢为了特效肯定是牺牲一定的兼容性。这里呢，分享一个基于canvas开发的浩瀚星河插件，其实这个源代码是网上下载的，我把它整合了一下，重新封装一些参数提供更多的可改项。

首先引入两个javascript脚本，一个是jquery插件，另一个是封装好的cosmos_canvas.js

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="canvas/cosmos_canvas.js" type="text/javascript" charset="utf-8"></script>

HTML，当然如果浏览器不支持canvas的话，运行程序没效果，并显示“该浏览器不支持canvas”

<canvas id="starts">该浏览器不支持canvas</canvas>

cosmos_canvas.js脚本

function canvas(id,starscolor,starsamount,starsradius,movrange,speed,trailing){
	//宇宙特效
"use strict";
var canvas = document.getElementById(id),
  ctx = canvas.getContext('2d'),
  w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight,

  hue = starscolor,//230
  stars = [],
  count

最低0.47元/天解锁文章