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>

  

时间: 2024-12-14 18:43:02

canvas仿屏幕保护运动线条的相关文章

html5 Canvas画图3:1px线条模糊问题

点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下. 其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看

Canvas 仿百度贴吧客户端 loading 小球

前言 几天前在简书上看到在一篇文章<Android仿百度贴吧客户端Loading小球>,看了一下作者,他写了两个好玩的 demo,效果图如下: 今天趁着周末有空,用 H5 的 Canvas 仿了一下.这篇文章只实现第一个效果图.这是我实现的效果: 实现原理 实现原理是参考简书的那篇文章,这里不再复述.现在我们来一步一步实现这样的效果. 第零步:画一个圆 源码如下: <!DOCTYPE html> <html> <head> <meta charset=

centos 去除屏幕保护

CentOS系统在用户闲置一段时间(默认为5分钟)后,会启动屏幕保护程序(默认的屏保为黑屏),并要求重新输入密码才能回到原来的桌面. 设置屏幕保护:System -> Preferences -> Screensaver. 如果需要取消屏幕保护的锁定功能,将Lock screen when screensaver is active前面的勾去掉就可以了. -------)[linux[email protected]linuxzgf ~]$ setterm -blank 0 关闭屏保,此命令执

Centos7 关掉屏幕保护

网上查询时,很多都说用命令"setterm -blank 0"的方法关掉屏幕保护,不过我尝试后发现没有起作用,屏幕保护仍然存在. 根据查询setterm命令中的参数,我想应该是setterm命令中的 -powersave 选项. 于是尝试使用如下命令: setterm -powersave off 不过运行该命令时,命令行界面输出如下错误消息: setterm: cannot (un)set powersave mode: Inappropriate ioctl for device

【心得】centos 去除屏幕保护

CentOS系统在用户闲置一段时间(默认为5分钟)后,会启动屏幕保护程序(默认的屏保为黑屏),并要求重新输入密码才能回到原来的桌面. 设置屏幕保护:System -> Preferences -> Screensaver. 如果需要取消屏幕保护的锁定功能,将Lock screen when screensaver is active前面的勾去掉就可以了. [linux[email protected]linuxzgf ~]$ setterm -blank 0 关闭屏保,此命令执行后就不影响观看

windows屏幕保护程序opengl模板

Visual Studio 2013 屏幕保护程序opengl模板 ScreenSaver.cpp #define VC_EXTRALEAN #include <windows.h> #include <commctrl.h> #include <scrnsave.h> #include <time.h> #include <math.h> #include <string> #include <time.h> #incl

HTML5 Canvas彩色小球碰撞运动特效

脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ 效果图如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Canvas彩色小球碰撞运动特效

windows屏幕保护opengl程序模板

Visual Studio 2013 屏幕保护程序opengl模板 ScreenSaver.cpp #define VC_EXTRALEAN #include <windows.h> #include <commctrl.h> #include <scrnsave.h> #include <time.h> #include <math.h> #include <string> #include <time.h> #incl

UIWindow的妙用(二) 制作App的屏幕保护功能

在IOS的开发中,有的时候出于美观的需要会要求App制作一个屏幕保护的功能,主要就是在App运行时如果经过一段时间没有触摸屏幕,App就会播放屏幕保护的内容,当触摸屏幕的时候,屏幕保护消失,程序继续运行, 首先实现检测到受否有触摸屏幕,那么就要用到UIWindow的实例方法 - (void)sendEvent:(UIEvent *)event 来检测是否触摸屏幕 定义一个UIWindow的子类 #import <UIKit/UIKit.h> @class MainViewController,