您的位置：首页 > 其它

Canvas小demo(直线和曲线绘制出一个星空，月亮，绿地)

2016-10-28 16:23 330 查看

主要包含的知识点：

直线绘制

径向渐变(绘制天空井深的情况，由蓝变黑)

五角星数学知识，点与点之间的角度为72deg。。。

图形变换与状态保存

弧线绘制月亮（arc,arcTo）

贝塞尔曲线绘制绿地(bezierCurveTo)

线性渐变(绿地颜色从远到近是由深到浅)

请看完整代码

<!DOCTYPE html>
<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的值也应该在这个范围内进行取值
*
* 通过tra
4000
nslate(),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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航