71 lines
No EOL
1.8 KiB
JavaScript
71 lines
No EOL
1.8 KiB
JavaScript
const getAnimateCanvas =()=>{
|
||
const mycanvas = document.getElementById('codeStreamCanvas');
|
||
return mycanvas ;
|
||
}
|
||
const animate_coding_effect =()=> {
|
||
|
||
var H = window.innerHeight;
|
||
var W = window.innerWidth;
|
||
var mycanvas = getAnimateCanvas()
|
||
var ctx = mycanvas.getContext('2d');
|
||
|
||
mycanvas.height = H;
|
||
mycanvas.width = W;
|
||
|
||
var fontsize = 18;
|
||
var text = [];
|
||
var lie = Math.floor(W / fontsize);
|
||
var str = '01'
|
||
for (var i = 0; i < lie; i++) {
|
||
text.push(0);
|
||
}
|
||
ctx.font = fontsize + 'px ';
|
||
|
||
function draw() {
|
||
ctx.fillStyle = 'rgba(0,0,0,0.08)'
|
||
ctx.fillRect(0, 0, W, H);
|
||
ctx.fillStyle = randColor();
|
||
for (var i = 0; i < lie; i++) {
|
||
var index = Math.floor(Math.random() * str.length);
|
||
var x = Math.floor(fontsize * i)
|
||
var y = text[i] * fontsize
|
||
ctx.fillText(str[index], x, y);
|
||
if (y > H && Math.random() > 0.99) {
|
||
text[i] = 0
|
||
}
|
||
text[i]++;
|
||
}
|
||
}
|
||
|
||
function randColor() {
|
||
var r = Math.ceil(Math.random() * 155) + 100;
|
||
var g = Math.ceil(Math.random() * 155) + 100;
|
||
var b = Math.ceil(Math.random() * 155) + 100;
|
||
return 'rgb(' + r + ',' + g + ',' + b + ')'
|
||
}
|
||
|
||
var timer = setInterval(function() {
|
||
draw();
|
||
}, 1000 / 30)
|
||
}
|
||
const listenWindowSize = ()=>{
|
||
window.οnresize=function(){
|
||
var mycanvas = document.getElementById('mycanvas');
|
||
if (!mycanvas) return ;
|
||
var H = window.innerHeight;
|
||
var W = window.innerWidth;
|
||
mycanvas.height = H;
|
||
mycanvas.width = W;
|
||
}
|
||
}
|
||
|
||
|
||
window.onload=function(){
|
||
//console.log('🚀 effect.js,window.onload')
|
||
if (getAnimateCanvas()){
|
||
animate_coding_effect()
|
||
listenWindowSize();
|
||
}
|
||
}
|
||
|
||
//console.log('🚀 effect.js')
|