北大青鸟课工场
北大青鸟课工场 全国统一咨询热线:400-8869355
 首页  »    资讯   »    内容

canvas动态效果时钟

    摘自前端网     2017-01-10     4624浏览

H5标签canvas特效,课工场中关村实训基地web前端核心技术

主要是为了熟悉canvas绘图方面的相关api,从而学写了一个电子时钟。
效果图如下:

152250ceduz466260r41c6.jpg

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>电子钟</title>

</head>

<body>

<canvas id="canvas" width="1024" height="500" style="display: block;margin: 0 auto; border-bottom: 1px solid #aaa;"></canvas>

<script>

// 数字矩阵

var 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]

] //:

];


var RADIUS = 6;

var MARGIN_TOP = 100;

var MARGIN_LEFT = 50;

var ballColors = ["#9f90cd", "#ddd", "#af672d", "#aaafff", "yellow", "#0912af", "pink", "#346a231", "#a91eed"];

var balls = [];

var curDate;

/** 绘制数字

 * @param  ctx绘图上下文

 * @param  x坐标轴

 * @param  y坐标轴

 * @param  num数字

 */

var draw = function(ctx, x, y, num) {

var points = digit[num];

for (var i = 0; i < points.length; i++) {

for (var j = 0; j < points[i].length; j++) {

if (points[i][j] == 1) {

ctx.beginPath();

ctx.arc(x + j * (RADIUS * 2 + 1), y + i * (RADIUS * 2 + 1), RADIUS, 0, 2 * Math.PI);

ctx.fillStyle = "#aaa";

ctx.fill();

}

}

}

}

var ball = {

x: 512,

y: 10,

g: 2,

vx: -4,

vy: 0,

color: "#a368dc"

};

// 渲染时钟

var renderClock = function(context) {

var date = new Date();

var HOUR = date.getHours();

var MINUTE = date.getMinutes();

var SECOND = date.getSeconds();


draw(context, MARGIN_LEFT, MARGIN_TOP, parseInt(HOUR / 10));

draw(context, MARGIN_LEFT + 1 * 18 * RADIUS, MARGIN_TOP, HOUR % 10);

draw(context, MARGIN_LEFT + 2 * 18 * RADIUS, MARGIN_TOP, 10);

draw(context, MARGIN_LEFT + 3 * 18 * RADIUS, MARGIN_TOP, parseInt(MINUTE / 10));

draw(context, MARGIN_LEFT + 4 * 18 * RADIUS, MARGIN_TOP, MINUTE % 10);

draw(context, MARGIN_LEFT + 5 * 18 * RADIUS, MARGIN_TOP, 10);

draw(context, MARGIN_LEFT + 6 * 18 * RADIUS, MARGIN_TOP, parseInt(SECOND / 10));

draw(context, MARGIN_LEFT + 7 * 18 * RADIUS, MARGIN_TOP, SECOND % 10);

var nextDate = new Date();

if (curDate.getSeconds() != nextDate.getSeconds()) {

curDate = nextDate;

addBalls(context, MARGIN_LEFT + 7 * 18 * RADIUS, MARGIN_TOP, curDate % 10);

// 防止性能损耗,移去多余的球

var curIndex = 0;

while (balls.length > 200) {

balls.splice(curIndex, 1);

curIndex++;

}

}

console.log(balls.length);

}

// 加小球

var addBalls = function(context, x, y, num) {

var points = digit[num];

for (var i = 0; i < points.length; i++) {

for (var j = 0; j < points[i].length; j++) {

if (points[i][j] == 1) {

var rad = parseInt(Math.random(0, 1) * 9) + 1;

var ball = {

x: x + j * (RADIUS * 2 + 1),

y: y + i * (RADIUS * 2 + 1),

color: ballColors[rad],

vx: Math.pow(-1, j) * rad,

vy: Math.pow(-1, j + 1) * rad,

g: rad

};

balls.push(ball);

}

}

}

}

// 画小球

var renderBall = function(context) {


for (var i = 0; i < balls.length; i++) {

var ball = balls[i];

ball.x += ball.vx;

ball.y += ball.vy;

ball.vy += ball.g;

if (ball.y > 500 - RADIUS) {

ball.y = 500 - RADIUS;

ball.vy = -ball.vy * 0.5;

}

context.beginPath();

context.arc(ball.x, ball.y, RADIUS, 0, 2 * Math.PI);

context.closePath();

context.fillStyle = ball.color;

context.fill();

}

}

// 初始化

var init = function() {

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

curDate = new Date();

window.setInterval(function() {

context.clearRect(0, 0, canvas.width, canvas.height);

renderClock(context);

renderBall(context);

}, 50);

}

// 加载

window.onload = function() {

init();

}

</script>

</body>

</html>



我要分享:

 相关阅读

咨询专栏

学费低到不能说,薪资高到没朋友!你离高薪只差一个电话的距离。
QQ群:263965166
电话:400-8869355

咨询在线老师
课工场报名 预约免费试听