canvas制作倒计时炫丽效果
<!DOCTYPE html>
<head>
<title>canvas倒计时</title>
<style>
.canvas{
display: block;
border: 1px solid #000;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas"></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,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]
], //
[
[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]
], //
[
[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]
], //
[
[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],
[1,1,0,0,1,1,0],
[0,0,0,1,1,1,1]
], //
[
[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]
], //
[
[0,0,0,0,1,1,1],
[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]
], //
[
[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]
], //
[
[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]
], //
[
[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]
], //
[
[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 WINDOW_HEIGHT = 468;
var WINDOW_WIDTH = 1024;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30; //const endTime = new Date(2017,1,03,28,18,09);
var endTime = new Date();
endTime.setTime(endTime.getTime()+3600*1000);
var curShowTimeSeconds = 0; var balls = [];
var colors = ['#33B5E5','#0099CC','#AA66CC','#9933CC','#99CC00','#669900','#FF8800','FF8888','#CC0000']; window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.height = WINDOW_HEIGHT;
canvas.width = WINDOW_WIDTH; curShowTimeSeconds = getCurrentShowTimeSeconds(); setInterval(function(){
render(cxt);
update();
},50);
}
function getCurrentShowTimeSeconds(){
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000); return ret >=0? ret : 0;
}
function update(){ var nextShowTimeSeconds = getCurrentShowTimeSeconds(); var nextHours = parseInt(nextShowTimeSeconds / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds -nextHours*3600)/ 60);
var nextSeconds = nextShowTimeSeconds % 60; var curHours = parseInt(curShowTimeSeconds / 3600);
var curMinutes = parseInt((curShowTimeSeconds -curHours*3600)/ 60);
var curSeconds = curShowTimeSeconds% 60; if(nextSeconds != curSeconds){ if(parseInt(curHours/10) != parseInt(nextHours/10)){
addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours/10));
}
if(parseInt(curHours%10) != parseInt(nextHours%10)){
addBalls(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(curHours/10));
}
if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
addBalls(MARGIN_LEFT + 39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10));
}
if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
addBalls(MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10));
}
if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
addBalls(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10));
}
if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
addBalls(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10));
} curShowTimeSeconds = nextShowTimeSeconds;
} updateBalls();
}
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 >= canvas.height -RADIUS){ balls[i].y = canvas.height - RADIUS;
balls[i].vy = -balls[i].vy*0.65; //加一个摩擦力系数
}
} 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 > Math.min(300,cnt)){
balls.pop();
}
}
function addBalls(x, y, num){
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 render(cxt){ cxt.clearRect(0,0, WINDOW_WIDTH, WINDOW_HEIGHT); var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds -hours*3600)/ 60);
var seconds = curShowTimeSeconds% 60; renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt);
renderDigit(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), cxt);
renderDigit(MARGIN_LEFT+30*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), cxt);
renderDigit(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), cxt);
renderDigit(MARGIN_LEFT+69*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), cxt);
renderDigit(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), 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 renderDigit(x,y, num, cxt){ cxt.fillStyle = 'rgb(0,102,153)'; 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){
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();
}
}
}
}
</script> </body>
</html>
<!DOCTYPE html>
<head>
<title>canvas倒计时</title>
<style>
.canvas{
display: block;
border: 1px solid #000;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas"></canvas> <script>
var ball = {x: 512, y:100, r:20, g:2, vx: -1, vy: 0, color: '#005588'};
window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.width = 1024;
canvas.height = 468; setInterval(function(){
render(cxt);
update();
},50);
}
function update(){
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g;
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,canvas.height); cxt.fillStyle = ball.color;
cxt.beginPath();
cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
cxt.closePath(); cxt.fill();
}
</script>
</body>
</html>
<!DOCTYPE html>
<head>
<title>canvas倒计时</title>
<style>
.canvas{
display: block;
border: 1px solid #000;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas"></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,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]
], //
[
[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]
], //
[
[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]
], //
[
[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],
[1,1,0,0,1,1,0],
[0,0,0,1,1,1,1]
], //
[
[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]
], //
[
[0,0,0,0,1,1,1],
[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]
], //
[
[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]
], //
[
[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]
], //
[
[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]
], //
[
[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 WINDOW_HEIGHT = 468;
var WINDOW_WIDTH = 1024;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30; const endTime = new Date(2017,1,03,28,18,09);
var curShowTimeSeconds = 0; window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.height = WINDOW_HEIGHT;
canvas.width = WINDOW_WIDTH; curShowTimeSeconds = getCurrentShowTimeSeconds(); setInterval(function(){
render(cxt);
update();
},50);
}
function getCurrentShowTimeSeconds(){
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000); return ret >=0? ret : 0;
}
function update(){ var nextShowTimeSeconds = getCurrentShowTimeSeconds(); var nextHours = parseInt(nextShowTimeSeconds / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds -nextHours*3600)/ 60);
var nextSeconds = nextShowTimeSeconds % 60; var curHours = parseInt(curShowTimeSeconds / 3600);
var curMinutes = parseInt((curShowTimeSeconds -curHours*3600)/ 60);
var curSeconds = curShowTimeSeconds% 60; if(nextSeconds != curSeconds){ curShowTimeSeconds = nextShowTimeSeconds;
}
}
function render(cxt){ cxt.clearRect(0,0, WINDOW_WIDTH, WINDOW_HEIGHT); var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds -hours*3600)/ 60);
var seconds = curShowTimeSeconds% 60; renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt);
renderDigit(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), cxt);
renderDigit(MARGIN_LEFT+30*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), cxt);
renderDigit(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), cxt);
renderDigit(MARGIN_LEFT+69*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), cxt);
renderDigit(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), cxt);
}
function renderDigit(x,y, num, cxt){ cxt.fillStyle = 'rgb(0,102,153)'; 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){
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();
}
}
}
}
</script>
<script>
var ball = {x: 512, y:100, r:20, g:2, vx: -1, vy: 0, color: '#005588'};
window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.width = 1024;
canvas.height = 468; setInterval(function(){
render(cxt);
update();
},50);
}
function update(){
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g; if(ball.y >= canvas.height -ball.r){ ball.y = canvas.height - ball.r;
ball.vy = -ball.vy*0.6; //加一个摩擦力系数
}
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,canvas.height); cxt.fillStyle = ball.color;
cxt.beginPath();
cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
cxt.closePath(); cxt.fill();
}
</script>
</body>
</html>
canvas制作倒计时炫丽效果的更多相关文章
- 酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- canvas制作倒计时效果
- canvas制作的烟花效果
最近感觉canvas挺有意思的,在业余时间没事研究了一下,参考过网上一些思路,话不多说,开始啦. github地址:https://github.com/aWhiteBear/fireworks 演示 ...
- canvas实现倒计时效果示例（vue组件内编写）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- html5 canvas 实现倒计时 功能
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...
- H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
随机推荐
- Chrome插件-Postman Interceptor
postman有一个chrome插件 Postman Interceptor,可以让postman中发送请求的时候使用这个网站的浏览器cookie Postman Interceptor,可以让pos ...
- 配置vuex并使用
配置vuex并使用 安装vuex: npm install --save-dev vuex 在src目录下创建store文件夹 store文件夹下文件 index.js,state.js,getter ...
- pf4j实例 插件框架
实现整个过程需要三个部分,第一就是根接口,第二是插件,第三是应用程序.这是3个java项目. 首先要下载jar包,百度搜索maven repository,然后搜索pf4j,如下图,下载第一个的相应版 ...
- CF581D Three Logos 暴力
Three companies decided to order a billboard with pictures of their logos. A billboard is a big squa ...
- opencv-视频分解图片
1.加载视频2. info信息 3. 解码,parse方法解析视频 4. imshow展示或者保存imread # 视频分解图片 # 1 load 2 info 3 parse 4 imshow im ...
- Eclipse报错：Attribute "xmlns" was already specified for element "web-app".
原因: 在Eclipse中修改了已有的Web工程的工程名,然后出现该错误. Attribute "xmlns" was already specified for element ...
- POJ1059 Chutes and Ladders
题目来源:http://poj.org/problem?id=1059 题目大意: 有一种叫做“Chutes and Ladders”(梯子和滑梯)的简单游戏.游戏在一块棋盘上进行,棋盘上有编号从1- ...
- Mybatis学习笔记(五) —— Mapper.xml(输入映射和输出映射）
一.parameterType(输入类型) 1.1 传递简单类型 <!-- 根据用户id查询用户 --> <select id="queryUserById" p ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_CLR
1.CLR简介 全称:Common Language Runtime(公共语言进行时) 属性:一种托管模块 使用对象:面向CLR的所有语言(C#.Basic.IL...) 核心功能:内存管理.程序集加 ...
- Spring Boot如何初始化数据
Hibernate机制:classpath下的import.sql,l在ddl-auto是create和create-drop时自动执行,如果ddl-auto设置为update就不合适,所以此选项不适 ...