canvas仿屏幕保护运动线条
canvas是H5中及其重要的一个新标签，它得出现不仅让前端做图形图表功能变得异常强大，还用极强的性能丰富前端渲染页面的能力。
Life is not a problem to be solved, but a reality to be experienced.
人生不是待解决的难题，而是等着我们去体验的现实。
首先canvas标签
<canvas id="c1" width="" height=""></canvas>
canvas标签的width，height如果写在style标签中会产生模糊。
canvas的基本js操作
定义一个画笔
var oC=document.getElementById('c1');
var gd=oC.getContext('2d');
移动到坐标点：gd.moveTo(100,100);
连接线： gd.lineTo(); 注意只是做了选区，并没有实际画出线条
封闭选区： gd.closePath();
选择颜色： gd.strokeStyle='red';
选择线条宽度：gd.lineWidth=20;
画出线条： gd.stroke();
选择填充的颜色：gd.fillStyle='green';
填充： gd.fill();
画一个矩形： gd.strokeRect(起始坐标x，起始坐标y，宽，高);
画完一个操作，开始另一个的时候需要添加：
gd.beginPath();
结束一个操作的时候如果需要连回到起点，需要添加：
gd.closePath();
清除画布： clearRect(x,y,宽度，高度);
下面分享一个用canvas做的windows线条运动屏幕保护效果，这个效果只利用以上canvas的基础知识，同时例子中用到一个算法的东西，获取一个数组中最大/最小值得方法，这个方法的思路是依次讲数组中的每一个数字和数组的第一个数字做比较，如果数字大于数字的第一个数，那么讲两个数字调换位置，利用这种方法循环数组，获取数组的第一个数字便是数组中最大的数（这个在前面一篇关于算法总结的文章中已经详细说明）；
这个windows运动线条的效果的思路是，动态的再canvas画布上动态的创建了5个点，并赋予这5个点移动速度，并同时规定运动范围（当前屏幕可视窗），开启定时器使这些点不停的运动改变位置，再连接这5个点创建一个不停改变样式的不规则五边形，然后在数组中记录之前小点的位置和连接出来的图形，并赋予这些图形渐变的透明色并展示出来。
下面展示代码，js代码我在写的时候都做了明显的注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height: 100%;
overflow:hidden;
}
body{
background:#000;
}
#c1{ }
</style>
<script>
function rnd(m,n){
return parseInt(Math.random()*(n-m)+m);
}
window.onload=function(){
var oC=document.getElementById('c1');
var gd=oC.getContext('2d');
//设置canvas的宽度和高度
var oW=document.documentElement.clientWidth;
var oH=document.documentElement.clientHeight;
oC.width=oW;
oC.height=oH;
//创建的白色点的个数
var N=5;
//设置每个点的坐标的信息和移动速度的信息，并存入一个数组之中
var point=[];
for(var i=0;i<N;i++){
point[i]={
x:rnd(0,oC.width),
y:rnd(0,oC.height),
iSpeedX:rnd(-20,20),
iSpeedY:rnd(-20,20)
}
}
console.log(point);
//设置小点的宽和高
var pw=1;
var ph=1;
//设置重影的个数，详见下面注释
var LEN=100;
//准备一个空数组存放需要留下的LEN个数据
var oldArr=[];
//在oC创建点并让小点运动起来,运动之前先要清除画布
setInterval(function(){
gd.clearRect(0,0,oW,oH);
for(var i=0;i<point.length;i++){
point[i].x+=point[i].iSpeedX;
point[i].y+=point[i].iSpeedY;
//设置小点的运动范围
if(point[i].x<0){
point[i].iSpeedX*=-1;
}
if(point[i].x>oW){
point[i].iSpeedX*=-1;
}
if(point[i].y<0){
point[i].iSpeedY*=-1;
}
if(point[i].y>oH){
point[i].iSpeedY*=-1;
}
gd.fillStyle='#fff';
gd.fillRect(point[i].x,point[i].y,pw,ph);
}
//连线
gd.beginPath();
gd.moveTo(point[0].x,point[0].y);
for(var i=1;i<point.length;i++){
gd.lineTo(point[i].x,point[i].y);
}
gd.closePath();
gd.strokeStyle='#fff';
gd.stroke();
//开始设置重影，重影的思路是保存当前位置往前的若干次的位置的坐标，并用线连接起来，再设置一个透明度
//首先要先设置一个重影的个数，这个需要写到全局变量中
//创建一个空数组来装之前所有的坐标
var arr=[];
for(var i=0;i<point.length;i++){
arr[i]={
x:point[i].x,
y:point[i].y
};
}
console.log(arr);
//创建一个oldArr来存放我们需要留下的坐标数据，这个数据需要在每次程序开始的时候都为空，然后依次往里添加，当数组中数据的数量大于LEN时候，剔除前面多余的数据
oldArr.push(arr);
if(oldArr.length>LEN){
oldArr.shift();
} //现在得到的数据是两个相互包围的数组，划线的时候注意提取数据层次性
gd.beginPath();
for(var i=0;i<oldArr.length;i++){
var opacity=i/oldArr.length;
gd.strokeStyle='rgba(255,255,255,'+opacity+')';
gd.moveTo(oldArr[i][0].x,oldArr[i][0].y);
for(var j=1;j<oldArr[i].length;j++){
gd.lineTo(oldArr[i][j].x,oldArr[i][j].y);
}
gd.closePath();
gd.stroke();
}
},16); };
</script>
</head>
<body>
<canvas id="c1"></canvas>
</body>
</html>
canvas仿屏幕保护运动线条的更多相关文章
- html5 Canvas画图3：1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
- Canvas 仿百度贴吧客户端 loading 小球
前言 几天前在简书上看到在一篇文章<Android仿百度贴吧客户端Loading小球>,看了一下作者,他写了两个好玩的 demo,效果图如下: 今天趁着周末有空,用 H5 的 Canvas ...
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- 使用C#开发屏幕保护程序步骤
本文介绍使用C#制作屏幕保护的方法,这个屏幕保护就是仿效视窗系统自带的字幕屏保. 屏幕保护程序的扩展名虽然是"scr",但其实是一个可执行的"exe"文件.但他 ...
- Centos上的屏幕保护
关闭Centos上的屏幕保护:setterm -blank 0 设置Centos上的屏幕保护为5分钟:setterm -blank 5
- windows系统操作类和演示程序（关机，关闭显示器，打开屏幕保护程序，打开光驱等）
/// <summary> /// 系统控制类,关机,关闭显示器,打开屏幕保存程序等 /// </summary> public class SystemPowerContro ...
- windows屏幕保护程序opengl模板
Visual Studio 2013 屏幕保护程序opengl模板 ScreenSaver.cpp #define VC_EXTRALEAN #include <windows.h> #i ...
- SystemParametersInfo调置壁纸、屏幕保护程序
应用SystemParametersInfo函数可以获取和设置数量众多的windows系统参数.这个小程序就是运用了SystemParametersInfo函数来设置桌面的墙纸,而且程序可以让我们选择 ...
- 使用 WPF 开发一个 Windows 屏幕保护程序
最近有小伙伴问我如何可以让 Windows 静置一段时间不操作之后,显示一个特殊的界面.我想了想,屏幕保护程序可以做到这一点,而且,屏幕保护程序的开发也是非常简单的. 本文将介绍如何为 Windows ...
随机推荐
- datepicker冲突
公司里的项目由于发展较快,很多东西都没有好好梳理一下,以至于有很多的潜在的问题. 最近就遇到了一个比较坑的问题.datepicker 有两个插件库中的datepicker插件比较有名.一个是jQuer ...
- How to copy files between sites using JavaScript REST in Office365 / SharePoint 2013
http://techmikael.blogspot.in/2013/07/how-to-copy-files-between-sites-using.html I'm currently playi ...
- ubuntu下安装程序的三种方法
引言 在ubuntu当中,安装应用程序我所知道的有三种方法,分别是apt-get,dpkg安装deb和make install安装源码包三种.下面针对每一种方法各举例来说明. apt-get方法 使用 ...
- iOS支付宝集成时遇到的问题整理（1）
1.模拟器上运行正常,但是真机调试时报编译链接错误 :ld: '/Users/wangqipeng/Desktop/iOS支付宝官方文档/AlixPayDemo/libcrypto.a(bio_lib ...
- Android Design Support Library——Floating Action Button
Floating Action Button是一种悬浮操作的圆形按钮,继承自ImageView,可以通过android:src或者ImageView的任意方法,来设置FloatingActionBut ...
- Effective Java 36 Consistently use the Override annotation
Principle Use the Override annotation on every method declaration that you believe to override a sup ...
- oracle-表空间满了
一.查看 "sum MB", (a.bytes "used MB",b.bytes "free MB", ,) "used%&qu ...
- MFC分类
屏幕截图(带光标) MFC Button控件自绘 WM_CTLCOLOR消息 MFC窗口创建.销毁消息流程 DDX_Control.SubclassWindow和SubclassDlgItem 隐藏系 ...
- C/S架构程序多种类服务器之间实现单点登录（转）
(一) 在项目开发的过程中,经常会出现这样的情况:我们的产品包括很多,以QQ举例,如登陆.好友下载.群下载.网络硬盘.QQ游戏.QQ音乐等,总不能要求用户每次输入用户名.密码吧,为解决这个问题,高手提 ...
- java微信接口之三—上传多媒体文件
一.微信上传多媒体接口简介 1.请求:该请求是使用post提交from来实现的,我们可以在网页上进行表单提交来实现.地址为: http://file.api.weixin.qq.com/cgi-bin ...