[HTML5][簡易] 流幕動畫＠Morris' Blog｜PChome Online 個人新聞台

2013-12-16 19:26:06| 人氣2,057| 回應0 | 上一篇 | 下一篇

[HTML5][簡易] 流幕動畫

推薦 0 收藏 0 轉貼0 訂閱站台

繪製處理與一般 java application 的 paint 類似。

要如何做到層次淡化處理 ?

每畫一次線段，就將整個畫面覆蓋透明度很低的黑幕，如此以來原來有線的地方會隨時間而被黑幕遮蔽。

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style>
            p {
                font-size: 25px;
            }
            body{
                margin:0px 0px 0px 0px;
                background-color: #FFFFFF;
                font-family: Comic Sans MS,arial,helvetica,sans-serif;
                color: #000000;
                color: #00FF00;
                font-size: 15px;
                line-height:150%;
                word-wrap: break-word;
            }
        </style>
        <link href="css/reset.css" rel="stylesheet" media="screen" />
        <link href="css/main.css" rel="stylesheet" media="screen" />
    </head>
    <body style="margin:0">
        <div class="main-container">
            <div id="wrapper" class="empty">
                <canvas height="500" width="500" id="flow"></canvas>
            </div>

        </div>
            <script>
                var processBar = Array(10).join(0).split('');
                var rowValue = Array(10).join(0).split('');
                var rowWidth = 50;
                function flow() {
                        var tag = document.getElementById('flow');
                        w = tag.width;
                        h = tag.height;
                        c = tag.getContext("2d");
                        c.font = "Comic Sans MS";
                        c.fillStyle = "rgba(0,0,0,1)";
                        c.fillRect(0, 0, w, h);
                        setInterval( function() {
                            c.fillStyle = "rgba(0,0,0,0.05)";
                            c.fillRect(0, rowWidth, w, h-rowWidth);
                            c.fillStyle="rgba(0,255,0,1)";
                            processBar = processBar.map( function(v, i) {
                                if(rowValue[i] == 0)
                                    return v;
                                c.strokeStyle = "rgba(0,255,0,1)";
                                c.beginPath();
                                c.lineWidth = 3;
                                c.moveTo(i*rowWidth+rowWidth, v);
                                c.lineTo(i*rowWidth+rowWidth, v+10);
                                c.stroke();
                                v += 10;
                                if(v > 500) {
                                    v = rowWidth;
                                    rowValue[i] = 0;
                                    c.fillStyle = "rgba(0,0,0,1)";
                                    c.fillRect(i*rowWidth+rowWidth, 0, rowWidth, rowWidth);
                                }
                                return v;
                            })
                        }, 33);
                        setInterval(function() {
                                rowValue = rowValue.map( function(v, i) {
                                    if(v == 0) {
                                        if(Math.random() > 0.8) {
                                            c.font = "25px Comic Sans MS";
                                            c.fillStyle="rgba(0,255,0,1)";
                                            var val = Math.floor(Math.random()*10) + i*10;
                                            c.fillText("" + val, i*rowWidth+rowWidth, rowWidth);
                                            processBar[i] = rowWidth;
                                            return val;
                                        }
                                    } else {
                                        c.fillStyle = "rgba(0,0,0,0.25)";
                                        c.fillRect(i*rowWidth+rowWidth, 0, rowWidth, rowWidth);
                                    }
                                    return v;
                                });
                        }, 500);
                };
                flow();
            </script>
    </body>
</html>

我要檢舉

台長： Morris

您可能對以下文章有興趣

[HTML] CSS: Coding with Style

[PHP][作業] 日期使用&倒數

[HTML] CSS: Coding with Style

人氣(2,057) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 教育學習(進修、留學、學術研究、教育概況) | 個人分類: [學習]HTML |
此分類上一篇:[PHP][作業] 日期使用&倒數

回應(0)