HTML5 Canvas 动态效果原理性显示

效果是在下面两种显示效果中轮换：

代码如下：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>动态时钟效果原理性展示</title>
</head>

<body onload="draw()">
<canvas id="myCanvus" width="150px" height="50px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
</canvas>
</body>
</html>
<script type="text/javascript">
<!--
function draw(){
var canvas=document.getElementById("myCanvus");
var canvasWidth=150;
var canvasHeight=50;

var context=canvas.getContext("2d");
        context.clearRect(0,0,canvasWidth,canvasHeight);

// 时间
        context.font="bold 10px 宋体";
        context.fillStyle="black";
        context.fillText(getNowFormatDate() ,16,14);

// 文字
        context.font="bold 18px 楷体";
        context.strokeStyle="blue";
var sec=new Date().getSeconds();

if( (sec % 2)==0){
            context.strokeText("时光一去不复回" ,16,34);
        }else{
            context.strokeText(" 往事只能回味 " ,16,34);
        }

        setInterval('draw()',1000);
    }

function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
//-->
</script>

秒客网

HTML5 Canvas 动态效果原理性显示

相关文章