Canvas小demo(直线和曲线绘制出一个星空，月亮，绿地)
主要包含的知识点：
- 直线绘制
- 径向渐变(绘制天空井深的情况，由蓝变黑)
- 五角星数学知识，点与点之间的角度为72deg。。。
- 图形变换与状态保存
- 弧线绘制月亮（arc,arcTo）
- 贝塞尔曲线绘制绿地(bezierCurveTo)
线性渐变(绿地颜色从远到近是由深到浅)
请看完整代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星空，月亮title>
head>
<body>
<canvas id='canvas' style="border:1px solid #aaa;display:block;margin:50px auto;">canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
canvas.width = 1280;
canvas.height = 800;
var context = canvas.getContext('2d');
// context.fillStyle = '#000000';
/**
* 绘制一个镜像渐变的天空，从深蓝色到黑色
*/
var radialGrad = context.createRadialGradient(640,800,0,640,800,800);
radialGrad.addColorStop(0.0,'#1b0f53');
radialGrad.addColorStop(1,'#110d25');
context.fillStyle = radialGrad;
//直接绘制一个矩形，即代表星空
context.fillRect(0,0,canvas.width,canvas.height);
//绘制很多个不同的五角星
for(var i = 0 ; i <200 ; i++){
//得到不同大小的圆的半径
var r = Math.random() * 5 + 5;//获取5~10之间的随机数
var x = Math.random() * canvas.width;//获取随机的x偏移量,0~画布宽度之间的随机值
//乘以0.65的意思让星星不会出现在画布高度的0.65下面
var y = Math.random() * canvas.height * 0.65;
var rot = Math.random() * 360;//获取角度在0~360度之间的角度
drawStar(context,x,y,r,rot);
}
/**
* 绘制星空
*/
function drawStar(cxt,x,y,R,rot){
cxt.save();
//进行平移操作
cxt.translate(x,y);
//进行旋转操作
cxt.rotate(rot/180 * Math.PI);
//使用scale进行缩放，但是为防止对边框宽度进行缩放，就需要将跟边框相关的属性去掉
cxt.scale(R,R);
startPath(cxt);
cxt.fillStyle = '#fb3';
/*cxt.strokeStyle = '#fb5';
cxt.lineWidth = 3;
cxt.lineJoin = 'round';*/
cxt.fill();
//cxt.stroke();
cxt.restore();
}
/*绘制单个五角星的函数*/
function startPath(cxt){
cxt.beginPath();
for(var i = 0 ; i<5;i++){
cxt.lineTo(Math.cos((18 + i * 72)/180 * Math.PI) ,
-Math.sin((18 + i * 72) / 180 * Math.PI) );
cxt.lineTo(Math.cos((54 + i * 72)/180 * Math.PI) * 0.5,
-Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5 );
}
}
script>
<script type="text/javascript">
/*绘制一轮弯月*/
/**
* 弯月外面的弧是一段半圆弧线，使用arc绘制即可
* 里面是一段弧线，要用arcTo绘制
*/
/*context.arc(400,400,300,0.5 * Math.PI,1.5 * Math.PI ,true);
context.moveTo(400,100);
context.arcTo(1200,400,400,700,(400 - 100) * dis(1200,400,400,100) /(1200 - 400));
context.stroke();*/
//直角三角形求斜边长度
function dis(x1,y1,x2,y2){
return Math.sqrt((x1 - x2)*(x1 - x2) + (y1-y2) * (y1-y2));
}
/**
* [fillMoon 绘制带有填充颜色的弯月
* 在正则的环境下绘制，即以0,0点为圆心，1位半径的环境下绘制，这样的话
* 控制点d的值也应该在这个范围内进行取值
*
* 通过translate(),rotate(),scale()对正则环境下的弯月进行位移，旋转，缩放
* ]
* @param {[type]} cxt [description]
* @param {[type]} d [arcTo控制点的x坐标]
* @param {[type]} x [弯月的位置]
* @param {[type]} y [弯月的位置]
* @param {[type]} R [弯月的半径]
* @param {[type]} rot [弯月旋转的角度]
* @param {[type]} fillColor [用什么颜色填充，可选]
* @return {[type]} [description]
*/
function fillMoon(cxt,d,x,y,R,rot,fillColor){
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot * Math.PI /180);
cxt.scale(R,R);
pathMoon(cxt,d);
cxt.fillStyle = fillColor || '#fd5';
cxt.fill();
cxt.restore();
}
//以0,0点为圆心，1位半径的单位圆进行路径规划
function pathMoon(cxt,d){
cxt.beginPath();
cxt.arc(0,0,1,0.5 * Math.PI,1.5 * Math.PI ,true);
cxt.moveTo(0,-1);
cxt.arcTo(d,0,0,1,dis(d,0,0,-1) /d );
cxt.closePath();
}
fillMoon(context,2,1000,200,100,-10);
script>
<script type="text/javascript">
/*绘制绿地*/
drawLand(context);
function drawLand(cxt){
cxt.save();
cxt.beginPath();
cxt.moveTo(0,600);
cxt.bezierCurveTo(450,300,500,800,1280,600);
cxt.lineTo(1280,800);
cxt.lineTo(0,800);
cxt.closePath();
var linearGrad = cxt.createLinearGradient(0,600,0,800);
linearGrad.addColorStop(0,'#030');
linearGrad.addColorStop(1,'#580');
cxt.fillStyle = linearGrad;
cxt.fill();
cxt.restore();
}
script>
body>
html>