2013-12-16 19:26:06Morris
[HTML5][簡易] 流幕動畫
繪製處理與一般 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>