慎入!canvas+javascript垂直滚动字幕

canvas+javascript简单实现的“垂直滚动字幕”

代码如下:

<!DOCTYPE html>  
<html>  
<head>  
<title>Subtitle in HTML5</title>  
<script src="jquery-1.6.2.min.js"></script>  
<script>  
var st,ctx  
var speed=100;  
var start=0;  
var length=21;  
var font="20px Arial"  
var text=new Array("0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25");

$(document).ready(function(){
    st=$('#subtitle')[0];
    ctx=st.getContext("2d");
    ctx.font=font;
    ctx.textAlign='left';
    setInterval(draw,speed);
});

function draw(){  
    drawBackground();
    drawText();
}

function drawText(){  
    ctx.shadowOffsetY=2;
    ctx.shadowBlur=2;
    ctx.shadowColor="silver"
    alpha=1;
    ctx.save();
    ctx.fillStyle="rgba(255,255,255,"+alpha+")";
    for(i=start;i<start+length;i++){
        if(i<text.length){
            ctx.fillText(text[i],st.width-ctx.measureText(text[i]).width-30,st.height-25-(start+length-i)*25);
        }
    }
    start++;
    ctx.restore();
}

function drawBackground(){  
    ctx.fillStyle='black';
    ctx.fillRect(0,0,st.width,st.height);
}

</script>  
</head>  
<body>  
<canvas id="subtitle" width="800" height="600"></canvas>  
</body>  
</html>  

刚开始学习绘制..

效果非常差,看来得增加一个对象用来控制每条字幕

DEMO(慎入!!!)