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 ...
随机推荐
- React入门--------组件API
setState 参数:nextState(object),[callback(function)] 设置nextState的某个键值.通常如果希望在某个事件或某个回调中来重新渲染组件,setStat ...
- JavaScript基础16——js的BOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 今天发现新大陆：haml和Emmet
其实一开始小渣渣我只是想接触一下(css预处理器)sass,可是突然冒出一个haml. 原文是酱紫的. Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟 ...
- 上载EXCEL到SAP系统的方法之一
TEXT_CONVERT_XLS_TO_SAP实例 使用:gui_upload去上传excel数据,每次都出现乱码,不管中文英文都乱码. 至今不知道gui_upload是否支持excel文件上传,. ...
- arcgis andriod 长按获得当前信息
// 长按显示鼠标点坐标及比例尺 private class myLongPressListener implements OnLongPressListener { private static f ...
- SharePoint 2013 删除母版页报错“This file may not be moved, deleted, renamed, or otherwise edited”
在使用SharePoint 2013母版页的时候,我复制了一个seattle.master页面,然后想重命名一下发现报错,删除也报错,spd.页面分别试过签入签出以后均报错,错误如下: 尝试找了一下错 ...
- 【读书笔记】iOS-编码对象
Cocoa具备一种机制来将对象自身转换为某种格式并保存到磁盘中.对象可以将它们的实例变量和其他数据编码为数据块,然后保存到磁盘中.以后将这些数据块读回到内存中,并且还能基于保存的数据创建新对象.这个过 ...
- centos 安装完Nginx后，为什么访问不了？
很多时候,安装完成后,服务也启动了 但是访问不了 看看是不是防火墙开启了: 本地试下端口是否可访问telnet 192.168.4.155 80 CentOS 7默认使用的是firewall作为防火墙 ...
- 团队管理_效率开会[持续更新ing]
1.明确开会目的,这个会议是用来解决什么问题,得出什么结果. 2.明确会议内容与流程,简要说明会议分几个部分,一步一步推进会议的进行. 3.保证参会人员守时参加,会议准时开始. 4.保证会议时间尽量为 ...
- angularjs flask跨域问题 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'
场景,我要来我的server(A)上用api来访问另一个server(B)的问题,如果直接在A上调用B的api,那么就会出现XMLHttpRequest cannot load. No 'Access ...