首先创建HTML5模板:
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
在body中写入canvas标签:
<div style="text-align:center;">
<canvas id="canvas" ></canvas>
</div>
因为canvas是不具备绘制的功能,得靠javascript实现绘制的功能
输入:<script type="text/javascript" ></script>
代码如下:
<script type="text/javascript" >
//定义全局
var window_width=1248;//定义Canvas的宽
var RADIUS = 8 ;//定义Canvas的绘制圆的半径
var MARGIN_TOP=60;//定义Canvas的绘制圆的半径
</script>
引用7*10的画图的球 二维数组
<script type="text/javascript" src="js/digit.js"></script>
文件内容:
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
文档加载完之后的函数:
window.οnlοad=function(){
var canvas=document.getElementById('canvas');
canvas.width=window_width;
canvas.height=window_height;
if(canvas.getContext('2d')){
var context=canvas.getContext('2d');
startAnimation(context);// 开始动画
}else{
alert('当前用户浏览器不支持canvas,请更坏浏览器再试!');
}
}
//动画的函数如下:
function startAnimation(cxt){
var dateOld=new Date(); //取系统时间
var oldHours = dateOld.getHours(); //时
var oldMinutes = dateOld.getMinutes(); //分
var oldSeconds = dateOld.getSeconds(); //秒
showTime(cxt,oldHours ,oldMinutes ,oldSeconds ); //绘制显示时钟的时分秒
}
//画时间的球 调用方法和参数
function showTime(cxt,hours,minutes,seconds){
//清除旧的的花布
cxt.clearRect(0,0,window_width,window_height);
//每个球的半径为 RADIUS 加上 球之间的距离1,一共7个,长度为2*(RADIUS+1)*7,加多个半径为数字和数字的间距
//时的十位和个位
showDrawTime(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);
//时间的显示,X,Y为什么这样写,有对应的解释,如图
showDrawTime(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
showDrawTime(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);//冒号
//分的十位和个位
showDrawTime(MARGIN_LEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
showDrawTime(MARGIN_LEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
showDrawTime(MARGIN_LEFT+70*(RADIUS+1),MARGIN_TOP,10,cxt);
//秒的十位和个位
showDrawTime(MARGIN_LEFT+80*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
showDrawTime(MARGIN_LEFT+95*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);
}
//画时间的球
function showDrawTime(x,y,num,cxt){
cxt.fillStyle='red';
//digit为7*10的2d数组的图像
for (var i=0;i < digit[num].length;i++) {
for (var j=0;j < digit[num][i].length;j++) {
//因为画球的二维数组,显示球为1,空白为0;如下数组,数字为1的球
/* [0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
]*/
if (digit[num][i][j]==1) {
cxt.beginPath();
cxt.arc(x+j*2*(RADIUS+1)+RADIUS+1,y+i*2*(RADIUS+1)+RADIUS+1,RADIUS,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
//加跳的球的动画的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>123</title>
</head>
<body>
<div style="text-align:center;">
<canvas id="canvas" ></canvas>
</div>
<script type="text/javascript" src="js/digit.js"></script>
<script>
var window_width=1248;
var window_height=768;
var RADIUS = 8 ;
var MARGIN_TOP=60;
var MARGIN_LEFT=30;
var intervar=null; //定时器
var balls = []; //存储更新的时间的球
//随机用的颜色
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.οnlοad=function(){
var canvas=document.getElementById('canvas');
canvas.width=window_width;
canvas.height=window_height;
if(canvas.getContext('2d')){
var context=canvas.getContext('2d');
startAnimation(context);// 开始动画
}else{
alert('当前用户浏览器不支持canvas,请更坏浏览器再试!');
}
}
//动画初始化
function startAnimation(cxt){
//设置旧的的时间
var dateOld=new Date(); //取系统时间
var oldHours = dateOld.getHours(); //时
var oldMinutes = dateOld.getMinutes(); //分
var oldSeconds = dateOld.getSeconds(); //秒
//设置定时器,帧数为50
intervar=setInterval(function(){
var dateVal=new Date(); //取系统时间
var newHours = dateVal.getHours(); //时
var newMinutes = dateVal.getMinutes(); //分
var newSeconds = dateVal.getSeconds(); //秒
showTime(cxt,newHours,newMinutes,newSeconds); //绘制显示时钟的时分秒
if(oldHours!=newHours){
showDrawBounce(MARGIN_LEFT,MARGIN_TOP,parseInt(newHours/10),cxt);
showDrawBounce(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(newHours%10),cxt);
}
if(oldMinutes!=newMinutes){
showDrawBounce(MARGIN_LEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(newMinutes/10),cxt);
showDrawBounce(MARGIN_LEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(newMinutes%10),cxt);
}
if(oldSeconds!=newSeconds){
showDrawBounce(MARGIN_LEFT+80*(RADIUS+1),MARGIN_TOP,parseInt(newSeconds/10),cxt);
showDrawBounce(MARGIN_LEFT+95*(RADIUS+1),MARGIN_TOP,parseInt(newSeconds%10),cxt);
}
oldHours=newHours;
oldMinutes=newMinutes;
oldSeconds=newSeconds;
showBounce(cxt)
updateBalls();//球下降动画参数修改
},50);
}
//画时间的球 调用方法和参数
function showTime(cxt,hours,minutes,seconds){
//清除旧的的花布
cxt.clearRect(0,0,window_width,window_height);
//每个球的半径为 RADIUS 加上 球之间的距离1,一共7个,长度为2*(RADIUS+1)*7,加多个半径为数字和数字的间距
//时的十位和个位
showDrawTime(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);
showDrawTime(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
showDrawTime(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);//冒号
//分的十位和个位
showDrawTime(MARGIN_LEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
showDrawTime(MARGIN_LEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
showDrawTime(MARGIN_LEFT+70*(RADIUS+1),MARGIN_TOP,10,cxt);
//秒的十位和个位
showDrawTime(MARGIN_LEFT+80*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
showDrawTime(MARGIN_LEFT+95*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);
}
//画时间的球
function showDrawTime(x,y,num,cxt){
cxt.fillStyle='red';
//digit为7*10的2d数组的图像
for (var i=0;i < digit[num].length;i++) {
for (var j=0;j < digit[num][i].length;j++) {
//因为画球的二维数组,显示球为1,空白为0;如下数组,数字为1的球
/* [0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
]*/
if (digit[num][i][j]==1) {
cxt.beginPath();
cxt.arc(x+j*2*(RADIUS+1)+RADIUS+1,y+i*2*(RADIUS+1)+RADIUS+1,RADIUS,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
//画更新的球 调用方法和参数
function showBounce(cxt){
for( var i = 0 ; i < balls.length ; i ++ ){
cxt.fillStyle=balls[i].color;
cxt.beginPath();
cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
cxt.closePath();
cxt.fill();
}
}
//画更新的球
function showDrawBounce(x,y,num,cxt){
for( var i = 0 ; i < digit[num].length ; i ++ ){
for( var j = 0 ; j < digit[num][i].length ; j ++ ){
if( digit[num][i][j] == 1 ){
var aBall = {
x:x+j*2*(RADIUS+1)+(RADIUS+1),
y:y+i*2*(RADIUS+1)+(RADIUS+1),
g:1.5+Math.random(),
vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,
vy:-5,
color: colors[ Math.floor( Math.random()*colors.length ) ]
}
balls.push( aBall )
}
}
}
}
//画更新的球 加速度
function updateBalls(){
//绘制球跳动的参数
for( var i = 0 ; i < balls.length ; i ++ ){
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
if( balls[i].y >= window_height-RADIUS ){
balls[i].y = window_height-RADIUS;
balls[i].vy = - balls[i].vy*0.75;
}
}
//删除滚出屏幕的球
var cnt = 0
for( var i = 0 ; i < balls.length ; i ++ )
if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS < window_width )
balls[cnt++] = balls[i]
while( balls.length > cnt ){
balls.pop();
}
}
</script>
</body>
</html>
digit.JS:
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];