canvas漫天闪烁的星星

一.原理

星星之所以闪烁：采用的随机的抽取的星星发生缩放，从大足见变没有。

二.代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body bgcolor="#000">
<canvas id="canvas" style="display:block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">var canvas = document.getElementById("canvas");var cxt=canvas.getContext('2d');canvas.width =1920;canvas.height =800;starArr=[];  //2.多个星星对象for(var i=0;i<150;i++){var starObj={radius1:10+5*Math.random(),radius2:2+4*Math.random(),x:30+(canvas.width-60)*Math.random(),y:30+(canvas.height-60)*Math.random(),num:4,angle:360*Math.random(),changeAngle:-5+10*Math.random()}starArr.push(starObj);}setInterval(function(){update(cxt);},50);  //3.星星随机的变化：星星闪烁是因为大小缩放function update(cxt){cxt.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<starArr.length;i++) {starArr[i].angle+=starArr[i].changeAngle;cxt.save();cxt.beginPath();cxt.translate(starArr[i].x, starArr[i].y);cxt.rotate(starArr[i].angle * Math.PI /360);cxt.scale(Math.sin(starArr[i].angle * Math.PI / 180), Math.sin(starArr[i].angle * Math.PI / 180));cxt.globalAlpha = Math.abs(Math.sin(starArr[i].angle * Math.PI / 180));drawStars(cxt,0,0,starArr[i].radius1,starArr[i].radius2,starArr[i].num);cxt.restore();}} //1.绘制一个星星function drawStars(cxt,x,y,radius1,radius2,num){var angle = 360/(num*2);var arr = [];for(var i=0;i<num*2;i++){var starObj = {};if(i%2==0){starObj.x = x+radius1*Math.cos(i*angle*Math.PI/180);starObj.y = y+radius1*Math.sin(i*angle*Math.PI/180);}else{starObj.x = x+radius2*Math.cos(i*angle*Math.PI/180);starObj.y = y+radius2*Math.sin(i*angle*Math.PI/180);}arr.push(starObj);}cxt.beginPath();cxt.fillStyle="#fff";cxt.moveTo(arr[0].x,arr[0].y);for(var i=1;i<arr.length;i++){cxt.lineTo(arr[i].x,arr[i].y);}cxt.closePath();cxt.fill();}
</script>
</body>
</html>

canvas漫天闪烁的星星相关推荐

java随机星星怎么闪_canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
Linux操作系统下，在终端打印出闪烁的星星图案
Linux系统下,在终端打印出闪烁的星星图案. 一.首先需要耐心,使用输出语句先"弄"出一个星星图案 (我是为了打印出来的星星是在终端中间,所以这样子敲的,可根据自己想法完成) 二 ...
OpenGL_Qt学习笔记之_07(闪烁的星星)
OpenGL_Qt学习笔记之_07(闪烁的星星) 这一小节我们要完成的任务是:将一张背景是黑色,中间是白亮色的星星图片和五颜六色的颜色进行色彩融合,变成一颗彩色的星星.并且让这些星星自转和公转,可以控 ...
html5实例-闪烁的星星
一.绘制五角星 1.1页面结构 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
Vijos P1881 闪烁的星星
背景星光闪耀--深蓝色空间听说过他们的语言沉默暮他们称赞深相互描写叙述繁星, 漫天的繁星. 繁星排成一列, 我数一数呀, 一共同拥有N仅仅小星星呢. 星星们是听话的好孩子, 小岛在指挥它 ...
闪烁的星星(Nehe)
以下代码演示与Nehe教程第九课中一样的效果.第十课中三维的暂不实现.主要使用纹理贴图相关方面知识. WStar.h #pragma once #include <QtOpenGL/QtOpen ...
教你用canvas画n角星星
首先我们要明白星星的结构,星星有很多种,五角星是最常用的一种星星,后面还有三角星六角星等等,但是只要是星星都是高度对称的,所以只要是星星结构的东西我们就能按照一定规则将其画出. 我们看一下一个n角星的 ...
iOS中解析json数据
同Android中的jsonarray和jsonobject相同,iOS中json分为nsarray和jsonobject, []--------jsonarray/nsarray; {}------ ...
璀璨星空Mac高清动态壁纸
喜欢夜晚的繁星?小编分享这组璀璨星空高清动态壁纸给大家,漫天闪烁的星星非常震撼,感兴趣的来使用吧~ 璀璨星空高清动态壁纸
消除canvas闪烁
canvas的闪烁主要和平台有关,如何去避免需要慢慢积累经验. 1. clearRect造成闪烁使用clearRect清空局部区域后重绘能会造成闪烁.PC上问题不大,移动端比较明显.(注clearR ...

canvas漫天闪烁的星星

canvas漫天闪烁的星星相关推荐

最新文章

热门文章