关于我

心怀热忱，志于创造更美好的生活

小时候最喜欢说的话，下定的决心是长大后怎样怎样

现如今已经深处学校与社会的边缘地带，离口中的长大成人也仅仅一步之遥

我想世界会是美好的吧？

我相信

未来的日子即便枯燥也应当是在我热爱的行业做着我喜欢的事情

远方不远，推门便进
远方不远，推门便进

心怀热忱，志于创造更美好的生活。

本人积极热情，严谨负责，喜欢寻求灵感，捣鼓新技术。能很好的融入团队，对持续复现的bug，能够拿出十二分的魄力去解决。沉迷前端技术栈，阶段目标是成为一位披荆斩棘的高级前端工程师。

以下内容 随手一贴

fighting! canvas 仿制瀑布雨 向伪高能致敬~

效果图所示
效果图所示

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flow canvas·瀑布雨</title>
 
<style type="text/css">
/*basic reset*/
* {margin: 0; padding: 0;}
/*adding a black bg to the body to make things clearer*/
body {background: black;}
canvas {display: block;}
</style>
 
</head>
<body>
 
<canvas id="c"></canvas>
 
<script type="text/javascript">
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
 
    //making the canvas full screen
    c.height = window.innerHeight;
    c.width = window.innerWidth;
 
    //chinese characters - taken from the unicode charset
    var chinese = "I Love You£¡";
    //converting the string into an array of single characters
    chinese = chinese.split("");
 
    var font_size = 10;
    var columns = c.width / font_size; //number of columns for the rain
    //an array of drops - one per column
    var drops = [];
    //x below is the x coordinate
    //1 = y co-ordinate of the drop(same for every drop initially)
    for (var x = 0; x < columns; x++)
        drops[x] = 1;
 
    //drawing the characters
    function draw() {
        //Black BG for the canvas
        //translucent BG to show trail
        ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
        ctx.fillRect(0, 0, c.width, c.height);
 
        ctx.fillStyle = "#0F0"; //green text
        ctx.font = font_size + "px arial";
        //looping over drops
        for (var i = 0; i < drops.length; i++) {
            //a random chinese character to print
            var text = chinese[Math.floor(Math.random() * chinese.length)];
            //x = i*font_size, y = value of drops[i]*font_size
            ctx.fillText(text, i * font_size, drops[i] * font_size);
 
            //sending the drop back to the top randomly after it has crossed the screen
            //adding a randomness to the reset to make the drops scattered on the Y axis
            if (drops[i] * font_size > c.height && Math.random() > 0.975)
                drops[i] = 0;
 
            //incrementing Y coordinate
            drops[i]++;
        }
    }
    setInterval(draw, 50);
</script>
 
</body>
</html>