今天学习了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();
}