JavaScript canvas模仿コードフローの滝
本論文の実例はcanvas擬似コードフロー滝の具体的なコードを共有しています。
jsの部分にcanvasコードを書いて、詳しい注釈があります。
html部分：
一つのcanvas元素：
jsの部分にcanvasコードを書いて、詳しい注釈があります。
html部分：
一つのcanvas元素：
<canvas id="canvas" ></canvas>
<style>
*{
padding: 0;
margin: 0;
}
canvas{
background-color: #111;
}
body{
overflow: hidden;
}
</style>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//
var w = window.innerWidth;
var h = window.innerHeight;
// canvas
canvas.width = w;
canvas.height = h;
//
var fontSize = 16;
//
var col = Math.floor(w / fontSize);
// y
var cpy = [];
for(var i = 0;i< col; i++)
{
cpy[i] = 1;
}
//
var str = "Javascriphafhsdhfsfsf{}";
//
draw();
setInterval(draw,30);
function draw(){
context.beginPath();
//
context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0,0,w,h);
//
context.font = fontSize +"px bold ";
//
context.fillStyle = "#00cc33";
for(var i = 0; i < col;i++)
{
var index = Math.floor(Math.random()*str.length);
var x = i*fontSize;
var y = cpy[i]*fontSize;
context.fillText(str.charAt(index),x,y);
if(y >= h && Math.random()> 0.99)//
{
cpy[i]=0;// Math.random> 0.99 0
}
cpy[i]++;// ，
}
}
</script>