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 ...
随机推荐
- js填写银行卡号，每隔4位数字加一个空格
1.原生js写法 !function () { document.getElementById('bankCard').onkeyup = function (event) { var v = thi ...
- 收集oracle统计信息
优化器统计范围: 表统计: --行数,块数,行平均长度:all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN:列统计: --列中唯一值的数量(NDV),NULL值的数量,数据分 ...
- 关于停止AsyncTask和Thread的问题
在java的线程中,没有办法停止一个正在运行中的线程.在Android的AsyncTask中也是一样的.如果必须要停止一个线程,可以采用这个线程中设置一个标志位,然后在线程run方法或AsyncTas ...
- git常用命令，git版本控制和Xcode结合使用，用Xcode提交到github，github客户端使用
1.git常用命令 查看命令: 1.git --help 查看git所有命令 2.git clone -help 查看git clone命令的细节 3.git config -l 查看当前所有配置 ...
- OC语言-03-OC语言-三大特性
一.封装 1> 封装的定义 隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别 2> 封装的好处 可以通过set方法防止为成员变量设置不合理的值 仅向外部提供公 ...
- 自增build ID配置
本文转载出自:http://blog.sina.com.cn/s/blog_13ec67adc0102wimg.html Build在plist文件中的key是“CFBundleVersion”, ...
- json深度详解及org.json库
了解json (Javascript Object Notation) 网站:http://json.org/ english JSON (JavaScript Object Notation) i ...
- 为什么Erlang比C慢那么多倍？
Erlang 一直以慢“著称”,本文就来看看 Erlang 慢在什么地方,为什么比实现同样功能的 C 语言程序慢那么多倍.Erlang 作为一种虚拟机解释的语言,慢是当然的.不过本文从细节上分析为什么 ...
- subline 快捷键
subline 快捷键 安装 pretty css html 后1,CTRl+ shift +H 格式化代码
- 如何在CALayer设置滤镜
网上有很多关于CALayer中设置filtes属性的相关资料比如如何设置一个带滤镜的layer,代码如下: NSImage* image = [NSImage imageNamed:@"IM ...