canvas编写屏幕保护程序

Html

Css

* {
	margin:0;
	padding:0;
}
canvas {
	background:#000;
}
body,html {
	background:#fff;
	overflow:hidden;
}

//随机函数
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);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

canvas编写屏幕保护程序



代码描述：运用HTML5编写屏幕保护程序

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

liushaoye

相关代码

canvas编写屏幕保护程序

最新