使用canvas绘制一片星空
效果图
五角星计算方式
代码
<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
<canvas id="canvas" style="border: 1px solid #aaa" width="1920" height="962">
你的浏览器不支持canvas，请更换浏览器再试!
</canvas>
<script>
var c=document.getElementById("canvas");
c.width=document.body.clientWidth;
c.height=document.body.clientHeight; window.onload=function(){
if(c.getContext("2d")){
var cxt= c.getContext("2d");
}else{
document.write("你的浏览器不支持canvas，请更换浏览器再试!");
}
//星空背景颜色
var linearCrad=cxt.createLinearGradient(0,0,0, c.height* 0.68);
linearCrad.addColorStop(0.0, '#7ac4e1');
linearCrad.addColorStop(0.2, '#5eb8dd');
linearCrad.addColorStop(1.0, '#b6e2e5');
cxt.fillStyle=linearCrad;
cxt.fillRect(0,0, c.width, c.height);
//循环绘制100颗星星
for(var i=0 ; i<100 ; i++){
var r=Math.random() * 6 + 2;//半径
var x=Math.random() * c.width * 0.98 ; // x偏移量
var y=Math.random() * c.height * 0.6; //y偏移量
var a=Math.random() * 360; //旋转角度
drawStart(cxt , r/2.0 , r , x , y , a);
}
//月亮
fillMoon(cxt ,2, c.width * 0.88 , c.height * 0.24 ,100 ,20 , "#fff");
//绿地
drawLand(cxt);
}
/*
* cxt:绘图环境
* r：小圆半径
* R：大圆半径
* x：x轴偏移量
* y：y轴偏移量
* rot：旋转角度（逆时针）*/
function drawStart(cxt,r,R,x,y,rot){
cxt.beginPath();
cxt.fillStyle="#fff"
cxt.strokeStyle="#88b9dd";
for(var i=0 ; i < 5 ;i++){
cxt.lineTo( Math.cos((18+ i*72 - rot )/180 * Math.PI) * R + x//大圆
, -Math.sin((18 + i*72 - rot)/180 *Math.PI) * R + y);
cxt.lineTo( Math.cos((54+ i*72 - rot )/180 * Math.PI) * r + x//小圆
, -Math.sin((54 + i*72 - rot)/180 *Math.PI) * r + y);
}
cxt.closePath();
cxt.fill();
cxt.stroke();
}
/*
*参数说明
*R: 半径
* rot：旋转角度
*fillColor: 填充颜色
* */
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 || "#fb5";
cxt.shadowColor = "rgba(58,88,124,0.5)";
cxt.shadowOffsetX = 14 ;
cxt.shadowOffsetY = 14;
cxt.shadowBlur = 30;
cxt.fill(); cxt.restore();
}
/*
d ：坐标
*/
function pathMoon(cxt , d){
cxt.beginPath();
/*
*圆心（0,0）
*半径：1
* */
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(0 , -1 , d , 0) / d);
cxt.closePath();
}
function dis(x1 , y1 ,x2 , y2){
return Math.sqrt( (x1-x2) * (x1-x2) + (y1-y2) * (y1-y2) );
} /*
* 绿地
* */
function drawLand(cxt){
cxt.save();
cxt.beginPath();
cxt.moveTo(0 , c.height * 0.7);
/*cxt.bezierCurveTo(540 , 400 , 660 , 800 , 1200 , 600);*/
cxt.bezierCurveTo(c.width * 0.4 , c.height * 0.5 , c.width * 0.5 , c.height * 0.9 , c.width , c.height * 0.8);
cxt.lineTo(c.width , c.height);
cxt.lineTo(0 , c.height);
cxt.closePath();
//添加渐变
var landStyle = cxt.createLinearGradient(0 , 800 , 0 ,0);
landStyle.addColorStop(0.0 ,'#7dbf44');
landStyle.addColorStop(0.2 ,'#b9d532');
landStyle.addColorStop(1 ,'#79bd46');
cxt.fillStyle=landStyle;
cxt.fill();
cxt.restore();
}
</script>
</body>
使用canvas绘制一片星空的更多相关文章
- HTML5 Canvas ( 绘制一片星空 )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 绘制一轮弯月, 星空中的弯月 )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
随机推荐
- 【读书笔记】100个Switf必备tips
声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 1.Selector 在Swi ...
- OC 协议
OC 协议 概念:定义了一个接口,其他类负责来实现这些接口.如果你的类实现了一个协议的方法时,则说该类遵循此协议. 非正式协议:非正式协议虽名为协议,但实际上是挂于NSObject上的未实现分类(Un ...
- iOS开发之Socket通信实战--Request请求数据包编码模块
实际上在iOS很多应用开发中,大部分用的网络通信都是http/https协议,除非有特殊的需求会用到Socket网络协议进行网络数 据传输,这时候在iOS客户端就需要很好的第三方CocoaAsyncS ...
- yii2 实战教程之如何安装
作者:白狼 出处:http://www.manks.top/document/install.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则 ...
- winform窗体（二）——控件
一.窗体的事件 每一个窗体都有一个事件,这个窗体加载完成之后执行哪一段代码 位置:1)右键属性→事件→load 双击进入 2)双击窗体任意一个位置进入 删除事件:先将事件页面里面的挂好的事件删除,再删 ...
- 【hive】——Hive基本操作
阅读本文章可以带着下面问题:1.与传统数据库对比,找出他们的区别2.熟练写出增删改查(面试必备) 创建表:hive> CREATE TABLE pokes (foo INT, bar STRIN ...
- 【转载】 Java线程面试题 Top 50
Java线程面试题 Top 50 不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员 的欢迎.大多数待遇丰厚的J ...
- C++STL - 类模板
类的成员变量,成员函数,成员类型,以及基类中如果包含参数化的类型,那么该类就是一个类模板 1.定义 template<typename 类型形参1, typename 类型形参2,...&g ...
- percona教程：MySQL GROUP_CONCAT的使用
percona有一篇blog: The power of MySQL GROUP_CONCAT 比较详细地介绍了GROUP_CONCAT函数的用法.简单地翻译了一下. 假设你有4名工程师,这周他们为6 ...
- ubuntu下安装lrzsz
secureCRT中可以使用rz和sz命令上传和下载文件,可是这要linux中安装了lrzsz才可以.我用的时候无法使用apt-get自动安装,下面介绍手动安装的方法. 1 下载lrzsz软件 ht ...