html5实例-闪烁的星星
一、绘制五角星
1.1页面结构
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>绘制五角星</title>
<style type="text/css">
canvas{
background: #00113F;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
1.2封装一个绘制多边形的函数
- 在绘制之前首先我们需要画图分析一下，如何绘制一个多边形
- 由上图我们可以知道，五角星其实是由10个点连接起来的，而五角星外角的五个点是在一个大圆上，内角的五个点也是在一个小圆上，并且这两个圆的圆心是一样的。因此我们只要知道这两个圆的半径以及点的角度（角度等于360度/点的个数），即可绘制出这些点。
- 由上面分析可知，我们只需要知道原点坐标，大圆的半径，小圆的半径，以及确定需要绘制的边数，即可绘制出一个多边形，在这里我们默认绘制五边形
- 现在我们编写绘制多边形的函数，首先我们需要设置一些默认值
function drawStart(Object) {
/*设置一些默认值*/
Object = Object || {};
Object.x = Object.x; //多边形的x轴坐标
Object.y = Object.y; //多边形的y轴坐标
Object.radius1 = Object.radius1; //多边形外面大圆的半径
Object.radius2 = Object.radius2; //多边形内部小圆的半径
Object.angle = 360 / (Object.num * 2); //每个点所对应的角度
Object.num = Object.num || 5; //设置绘制几边形,默认为五边形
Object.drawType = Object.drawType || 'fill'; //绘制填充多边形还是不填充多边形
Object.fillStyle = Object.fillStyle || '#fff'; //设置多边形的填充颜色
Object.strokeStyle = Object.strokeStyle || '#ccc' //设置多边形的边的颜色*/
}
- 接下来我们需要确定五角星的所有点的坐标，并且把每个点的信息存放在对象里面，然后放在一个数组中
var arr = [];
for(var i = 0; i < Object.num * 2; i++) {
var oStar = {};
if(i % 2 == 0) { //判断是小圆上的点还是大圆上的点
oStar.x = Object.x + Object.radius1 * Math.cos(i * Object.angle * Math.PI / 180); //x坐标：圆点横坐标+半径*cos(弧度)
oStar.y = Object.y + Object.radius1 * Math.sin(i * Object.angle * Math.PI / 180);//y坐标：圆点纵坐标+半径*sin(弧度)
} else {
oStar.x = Object.x + Object.radius2 * Math.cos(i * Object.angle * Math.PI / 180);
oStar.y = Object.y + Object.radius2 * Math.sin(i * Object.angle * Math.PI / 180);
}
arr.push(oStar);
}
- 再接下来我们把这些点利用直线连起来就可以绘制一个五角星了
/*开始绘制多边形*/
context.beginPath();
context.moveTo(arr[0].x, arr[0].y);
for(var i = 0; i < arr.length; i++) {
context.lineTo(arr[i].x, arr[i].y);
}
context.closePath(); //关闭路径可以使首尾节点连接起来
if(Object.drawType == 'fill') { //判断需不需要填充多边形
context.fillStyle = Object.fillStyle;
context.strokeStyle = Object.strokeStyle;
context.stroke();
context.fill();
} else if(Object.drawType == 'stroke') {
context.strokeStyle = Object.strokeStyle;
context.stroke();
}
二、让星星闪烁
2.1 canvas图形合成api
2.2设置多个星星的参数
- 利用for语句循环遍历50次，每循环一次设置一个星星的参数，然后把这些参数放在一个数组中
var starArr = [];
for(var i = 0; i < 50; i++) {
var oStar2 = {
x: 30 + (canvas.width - 60) * Math.random(),
y: 30 + (canvas.height - 60) * Math.random(),
radius1: 10 + 5 * Math.random(),
radius2: 5,
angle1: 360 * Math.random(), //初始角度
changeAngle: -5 + 10 * Math.random(), //每次旋转的角度
}
starArr.push(oStar2);
}
- 让星星每60ms变换一次
setInterval(function() {
context.clearRect(0, 0, 500, 500);
for(var i = 0; i < starArr.length; i++) {
starArr[i].angle1 += starArr[i].changeAngle;
context.save(); //保存之前的绘图环境
context.beginPath();
context.translate(starArr[i].x, starArr[i].y);
context.rotate(starArr[i].angle1 * Math.PI / 180) //缩放
context.scale(Math.sin(starArr[i].angle1 * Math.PI / 180), Math.sin(starArr[i].angle1 * Math.PI / 180));
context.globalAlpha = Math.abs(Math.sin(starArr[i].angle1 * Math.PI / 180));
drawStart({
x: 0,
y: 0,
radius1: starArr[i].radius1,
radius2: starArr[i].radius2,
num: 5
});
context.restore();
}
}, 60)
- 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制五角星</title>
<style type="text/css">
canvas {
background: #00113F;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); function drawStart(Object) {
/*设置一些默认值*/
Object = Object || {};
Object.x = Object.x; //多边形的x轴坐标
Object.y = Object.y; //多边形的y轴坐标
Object.radius1 = Object.radius1; //多边形外面大圆的半径
Object.radius2 = Object.radius2; //多边形内部小圆的半径
Object.angle = 360 / (Object.num * 2);
Object.num = Object.num || 5; //设置绘制几边形,默认为五边形
Object.drawType = Object.drawType || 'fill'; //绘制填充多边形还是不填充多边形
Object.fillStyle = Object.fillStyle || '#fff'; //设置多边形的填充颜色
Object.strokeStyle = Object.strokeStyle || '#ccc' //设置多边形的边的颜色*/ var arr = [];
for(var i = 0; i < Object.num * 2; i++) {
var oStar = {};
if(i % 2 == 0) { //判断是小圆上的点还是大圆上的点
oStar.x = Object.x + Object.radius1 * Math.cos(i * Object.angle * Math.PI / 180); //x坐标：圆点横坐标+半径*cos(弧度)
oStar.y = Object.y + Object.radius1 * Math.sin(i * Object.angle * Math.PI / 180); //y坐标：圆点纵坐标+半径*sin(弧度)
} else {
oStar.x = Object.x + Object.radius2 * Math.cos(i * Object.angle * Math.PI / 180);
oStar.y = Object.y + Object.radius2 * Math.sin(i * Object.angle * Math.PI / 180);
}
arr.push(oStar);
} /*开始绘制多边形*/
context.beginPath();
context.moveTo(arr[0].x, arr[0].y);
for(var i = 0; i < arr.length; i++) {
context.lineTo(arr[i].x, arr[i].y);
}
context.closePath(); //关闭路径可以使首尾节点连接起来
if(Object.drawType == 'fill') { //判断需不需要填充多边形
context.fillStyle = Object.fillStyle;
context.strokeStyle = Object.strokeStyle;
context.stroke();
context.fill();
} else if(Object.drawType == 'stroke') {
context.strokeStyle = Object.strokeStyle;
context.stroke();
}
} var starArr = [];
for(var i = 0; i < 50; i++) {
var oStar2 = {
x: 30 + (canvas.width - 60) * Math.random(),
y: 30 + (canvas.height - 60) * Math.random(),
radius1: 10 + 5 * Math.random(),
radius2: 5,
angle1: 360 * Math.random(), //初始角度
changeAngle: -5 + 10 * Math.random(), //每次旋转的角度
}
starArr.push(oStar2);
} setInterval(function() {
context.clearRect(0, 0, 500, 500);
for(var i = 0; i < starArr.length; i++) {
starArr[i].angle1 += starArr[i].changeAngle;
context.save(); //保存之前的绘图环境
context.beginPath();
context.translate(starArr[i].x, starArr[i].y);
context.rotate(starArr[i].angle1 * Math.PI / 180) //缩放
context.scale(Math.sin(starArr[i].angle1 * Math.PI / 180), Math.sin(starArr[i].angle1 * Math.PI / 180));
context.globalAlpha = Math.abs(Math.sin(starArr[i].angle1 * Math.PI / 180));
drawStart({
x: 0,
y: 0,
radius1: starArr[i].radius1,
radius2: starArr[i].radius2,
num: 5
});
context.restore();
}
}, 60) }
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
- 效果演示
html5实例-闪烁的星星的更多相关文章
- 如何用PowerPoint制作闪烁的星星
在PPT中,PPT动画说是幻灯片PPT中的精华是当之无愧的!ppt文件有了动画,犹如插上翅膀的鸟,让PPT的色彩衍生出了更多的特色.只要你的ppt动画效果制作的对,你的幻灯片将明显与众不同,观众也更容 ...
- 值得 Web 开发人员收藏的20个 HTML5 实例教程
当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- Vijos P1881 闪烁的星星
背景 星光闪耀--深蓝色空间 听说过他们的语言 沉默 暮 他们称赞深相互 描写叙述 繁星, 漫天的繁星. 繁星排成一列, 我数一数呀, 一共同拥有N仅仅小星星呢. 星星们是听话的好孩子, 小岛在指挥它 ...
- html5 实例渐变
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Vijos P1881 闪烁的星星 （加强自己多一点。。）
假设每次查询不是整个长度,但[x, y]此时间间隔. . 闲来无事写的,感觉是正确的.这将成为合并范围. #include <cstdio> #include <cstring> ...
- HTML5应用——生日快乐动画之星星
在讲述绘制星星动画之前,先介绍一点javascript知识. 面向对象: javascript本质上不是面向对象语言,而是脚本语言,一般只适合简单.代码量少的程序,因为脚本过于复杂会直接导致浏览器出现 ...
- 出售基于Html5的高性能GIS平台源码
远景地理信息系统平台软件 远景地理信息系统平台软件,简称"RemoteGIS",版本V1.0,它是基于HTML5自主研发的新一代WEBGIS平台,它使用Javascript开发,具 ...
随机推荐
- 面试之MySQL基本命令
既然要操作数据库就从数据库链接写起,包括建库.建表.增删该查字段及约束,删库,删表的数据,以下主要是对我以往面试的总结,欢迎补充! 一.数据库连接 1.连接本机(p和密码123456之间无空格) my ...
- CentOS 7 网卡命名修改为ethx格式
Linux 操作系统的网卡设备的传统命名方式是 eth0.eth1.eth2等,而 CentOS7 提供了不同的命名规则,默认是基于固件.拓扑.位置信息来分配.这样做的优点是命名全自动的.可预知的,缺 ...
- 使用R语言将微信记录制作成词云（简洁）--情人节奥义
一.导出并读入微信聊天记录 参照百度的方法,使用同步助手.安装同步助手--连接手机(安卓苹果均可)--点击"其他功能"--点击微信图标即可进入聊天记录导出界面(非常简单). ...
- python中的select模块
介绍: Python中的select模块专注于I/O多路复用,提供了select poll epoll三个方法(其中后两个在Linux中可用,windows仅支持select),另外也提供了kqu ...
- 【G】开源的分布式部署解决方案（三） - 一期规划定稿与初步剖析
G.系列导航 [G]开源的分布式部署解决方案 - 预告篇 [G]开源的分布式部署解决方案(一) - 开篇 [G]开源的分布式部署解决方案(二) - 好项目是从烂项目基础上重构出来的 [G]开源的分布式 ...
- SpringMVC总结的部分教程及使用方法
注:本文只用注解来实现 SpringMVC各种流程图流程图(其他的各种流程图)jsp.xml.action彼此之间的关系,都如何使用spring-mvc.xml如何配置,放在哪里?action中如何转 ...
- JLOI2015 解题报告
JLOI2015 真的不愧是NOI出题组出的,题目难度够吊.不过每一道都是结论题和乱搞题真的很不好玩... T1:[JLOI2015]有意义的字符串 首先贴下popoqqq的blog吧 感性的认识就是 ...
- 设计理念 : popup login 在前后台
popup 意思是一个遮罩层顶在整个网页最前方,在前台设计是这样的,当用户想在那个界面登入时,就可以有一个遮罩层出现. 在employer或admin(后台)操作界面是同个理念,在所有的界面都是有co ...
- 读书笔记 effective c++ Item 10 让赋值运算符返回指向*this的引用
一个关于赋值的有趣的事情是你可以将它们链在一起: int x, y, z; x = y = z = ; // chain of assignments 同样有趣的是赋值采用右结合律,所以上面的赋值链被 ...
- 游戏UI框架设计(四) : 模态窗体管理
游戏UI框架设计(四) --模态窗体管理 我们在开发UI窗体时,对于"弹出窗体"往往因为需要玩家优先处理弹出小窗体,则要求玩家不能(无法)点击"父窗体",这种窗 ...