使用canvas画出满天繁星

今天学习了h5中的canvas标签，结合之前学习的画星星的算法，画出了满天繁星的效果图

下面是展示：

做这个比较难的是画星星的算法，下面是帮助大家理解一个图：

只需要找到上面的十个点(5个小圆的点和5个大圆的点)之间的规律，使用ctx.lineTo依次连接就OK了。

大圆和小圆的5个点之间的度数都相差72度。

cos和sin的值可以用Math.cos()和Math.sin()计算

然后下面是具体的代码示例：

demo.html

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="utf-8"><title></title>
</head>
<body><canvas id="canvas" style="border:1px solid #aaa;margin: 50px auto;display:block;"></canvas>
<script type="text/javascript" src="star.js"></script>
</body>
</html>

star.js

// 画星空
window.onload = function() {// 找到画布var canvas = document.getElementById("canvas");// 定义画布的长宽canvas.width = 1000;canvas.height = 800;// 上下文，用于绘制var context = canvas.getContext("2d");/*** [skyStyle description]* @type {[type]}* createRadialGradient是径向渐变填充函数*createRadialGradient的参数*从左至右依次为：* x0,y0,r0:起点的位置（相对canvas画布）和小圆的半径* x1,y1,r1:扩散至的终点的位置和大圆的半径*/var skyStyle = context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);//添加颜色skyStyle.addColorStop(0.0,'#035');skyStyle.addColorStop(1.0,'black');//将skyStyle用于填充展示天空的背景色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;// 让星星都在canvas画布的上面65%的区域显示var y = Math.random()*canvas.height*0.65;var a = Math.random()*360;drawStar(context, x, y, r, a);}};// 绘制五角星
// 改善后的drawStar使用了渐变色radialGrad(径向渐变)让天空的颜色更加逼真
/*** [drawStar description]* @param  {[type]} cxt [description] 绘制的上下文环境* @param  {[type]} r   [description] 五角星内部小圆的半径* @param  {[type]} R   [description] 五角星外部大圆的半径* @param  {[type]} x   [description] 五角星在水平方向上的位移* @param  {[type]} y   [description] 五角星在竖直方向上的位移* @param  {[type]} rot [description] 五角星的旋转角度* @return {[type]}     [description]*/
function drawStar(ctx, x, y, R, rot) {ctx.save();//与restore()一起出现，防止状态影响其他的绘制//图形变换ctx.translate(x,y);//偏移ctx.rotate(rot/180*Math.PI);//旋转ctx.scale(R,R);//缩放比例startPath(ctx);//开始绘制ctx.fillStyle = "#fb3";//内部填充的颜色ctx.fill();//内部填充颜色ctx.restore();}/*** [startPath description]画星星的具体算法* @param  {[type]} ctx [description]* @return {[type]}     [description]*/
function startPath (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();
}

使用canvas画出满天繁星相关推荐

通过canvas画出爱心图案，表达你的爱意！
通过canvas画出爱心图案,浏览器可以使用以下js代码,新建对象时,会自动呈现动画效果,代码文末可下载. 点击免费下载源码 let HeartCanvas = new HeartCanvas() / ...
如何用 canvas 画出分形图
前言分形是一门以非规则几何形态为研究对象的几何学,由曼德勃罗(B.B.Mandelbrot)等人创立并命名. 分形图从整体上看,是处处不规律的.但从局部观察,图形的规则性又是相同的,即具有自相似的 ...
樱花的季节，教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果第一步,我们先画出一棵 ...
openlayers中使用rBush(R树）来存放要素等信息，本文修改了一点其中的rbush源码中的demo，使用canvas画出了insert和delete操作（建立树和删除树中数据）
openlayers中使用rBush(R树)来存放要素等信息,本文修改了一点其中的rbush源码中的demo,使用canvas画出了insert和delete操作(建立树和删除树中数据) 修改后的源代 ...
java代码画樱花_樱花的季节，教大家用CANVAS画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 第一步,我们先画出一棵树的主体. 我 ...
java代码画樱花飘落_樱花的季节，教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 第一步,我们先画出一棵树的主体. 我 ...
html5画布画出折线图,canvas 画出动态折线图
canvas 是 html5 支持的一个标签,用于图形的绘制.canvas 标签仅仅提供了图形的容器,必须通过 js 脚本来绘制. 比如,绘制一个简单的矩形: 矩形.png var c=documen ...
微信小程序利用canvas画出根据文字自适应的边框
1.需求生成海需要画出一个中空带边框的的tag,如下图.众所周知,微信小程序里的canvas画图都是需要自己一点点画出来,不想html有htmlToCanvas,直接写HTML就可以转成canvas ...
php image 平滑曲线,如何使用canvas画出平滑的曲线?（代码）
本篇文章给大家带来的内容是关于如何使用canvans画出平滑的曲线?(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 背景概要相信大家平时在学习canvas 或项目开发中使 ...

使用canvas画出满天繁星

使用canvas画出满天繁星相关推荐

最新文章

热门文章