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 ...
随机推荐
- JavaScript中的null与nudefined
null和undefined 概述 null与undefined都可以表示"没有",含义非常相似.将一个变量赋值为undefined或null,老实说,语法效果几乎没区别. var ...
- javascript --- 将共享属性迁移到原型中去
当我们用一个构造函数创建对象时,其属性就会被添加到this中去.并且被添加到this中的属性实际上不会随着实体发生改变,这时,我们这种做法显得会很没有效率.例如: function her(){ th ...
- mvc项目架构搭建之UI层的搭建
项目架构搭建之UI层的搭建 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构各部分解析 5.项目创 ...
- C语言指针的长度和类型
本文地址:http://www.cnblogs.com/archimedes/p/point-length-type.html,转载请注明源地址. 如果考虑应用程序的兼容性和可移植性,指针的长度就是一 ...
- 使用CocoaPods管理第三方开源类库
iOS开发中经常会用到许多第三方开源类库,比如AFNetworking.FMDB.JSONKit等等,使用CocoaPods这个工具就能很方便得对工程中用到的类库进行管理,包括自动下载配置以及更新. ...
- iOS Technology Overview_Introduction
关于iOS技术 iOS是运行在iPad,iPhone和iPod touch设备上的操作系统.这个操作系统管理着这些设备的硬件并且提供了实现原生APP所需的技术.这个操作系统也附带许多系统APP,例如P ...
- Grand Central Dispatch (GCD)
Grand Central Dispatch (GCD) Reference Grand Central Dispatch (GCD) comprises language features, run ...
- iOS中倒计时
方法一:使用NSTimer来实现(比较适用于发送短信验证码倒计时) 主要是利用NSTimer的scheduledTimerWithTimeInterval方法来每秒执行一次changeTime方法 / ...
- Unity3D插件分享
网上看到一个讲unity3D插件的,看着不错,转载过来. 本文汇总了近百个Unity3D插件,供大家参考下载. 2D_Toolkit_1.51 动画开发插件包 FingerGestures 触摸插件 ...
- Cent OS服务器配置(JDK+Tomcat+MySQL)
本文摘自:Cent OS服务器配置(JDK+Tomcat+MySQL) 学习tar解压 解压 tar 文件 tar -zxvf apache-tomcat-6.0.35.tar.gz tomcat ...