html5 做屏幕保护效果,canvas编写屏幕保护程序

//随机函数

function ran(n, m) {

return parseInt(Math.random() * (m - n)) + n;

}

let oCan = document.querySelector('#can');

let gd = oCan.getContext('2d');

//设置canvas的宽高;

let DW = document.documentElement.clientWidth;

let DH = document.documentElement.clientHeight;

oCan.width = DW;

oCan.height = DH;

//随机几个点

let N = 5;

let pointArr = []; //[{x:...,y:...,xSpeed:...,ySpeed:...}...];

//绘制尾巴

let len = 50;

let oldArr = [];

for (let i = 0; i < N; i++) {

pointArr[i] = {

x: ran(0, DW),

y: ran(0, DH),

xSpeed: ran(-5, 5),

ySpeed: ran(-5, 5),

}

}

setInterval(function() {

//擦除

gd.clearRect(0, 0, DW, DH);

for (let i = 0; i < N; i++) {

pointArr[i].x += pointArr[i].xSpeed;

pointArr[i].y += pointArr[i].ySpeed;

if (pointArr[i].x <= 0) {

pointArr[i].x = 0;

pointArr[i].xSpeed *= -1

}

if (pointArr[i].y < 0) {

pointArr[i].y = 0;

pointArr[i].ySpeed *= -1

}

if (pointArr[i].x >= DW) {

pointArr[i].x = DW;

pointArr[i].xSpeed *= -1

}

if (pointArr[i].y >= DH) {

pointArr[i].y = DH;

pointArr[i].ySpeed *= -1

}

addPoint(pointArr[i])

}

//划线;

gd.beginPath();

gd.strokeStyle = getColor();

gd.moveTo(pointArr[0].x, pointArr[0].y);

for (let i = 1; i < pointArr.length; i++) {

gd.lineTo(pointArr[i].x, pointArr[i].y)

}

gd.closePath();

gd.stroke();

//绘制运动尾巴

let temp = [];

for (let i = 0; i < pointArr.length; i++) {

temp[i] = {

x: pointArr[i].x,

y: pointArr[i].y,

}

}

oldArr.push(temp);

if (oldArr.length > len) {

oldArr.shift()

}

//

for (let i = 0; i < oldArr.length; i++) {

gd.strokeStyle = 'rgba(' + ran(0, 255) + ',' + ran(0, 255) + ',' + ran(0, 255) + ',' + i / oldArr.length + ')';

gd.beginPath();

gd.moveTo(oldArr[i][0].x, oldArr[i][0].y);

for (let j = 1; j < oldArr[i].length; j++) {

gd.lineTo(oldArr[i][j].x, oldArr[i][j].y); //连线到第i个尾巴第j个点

}

gd.closePath();

gd.stroke();

}

}, 15);

//随机颜色的函数

function getColor() {

let R = ran(0, 255).toString(16);

let G = ran(0, 255).toString(16);

let B = ran(0, 255).toString(16);

return '#' + R + G + B;

}

//绘制点的函数

function addPoint(p) {

let pW = 1;

let pH = 1;

gd.fillStyle = '#fff';

gd.fillRect(p.x - pW / 2, p.y - pH / 2, pW, pH);

}