canvas基础绘制-绚丽时钟

效果图:

与canvas基础绘制-绚丽倒计时的代码差异:

// var endTime = new Date();//const声明变量,不可修改,必须声明时赋值;
// endTime.setTime( endTime.getTime() + 3600*1000);//当前时间向后一小时;
var curShowTimeSeconds = 0;
function getCurrentShowTimeSeconds() {
    var curTime = new Date();//获取目前时间;
    // var ret = endTime.getTime()-curTime.getTime();
    // ret = Math.round(ret/1000);//获取秒数差值;
    var ret = curTime.getHours()*3600 + curTime.getMinutes()*60+curTime.getSeconds();
    return ret>=0?ret:0;
}
时间: 2024-08-27 02:44:28

canvas基础绘制-绚丽时钟的相关文章

canvas基础绘制-绚丽倒计时

效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ball</title> <script src="digit_1.js"></script> <script src="countdown.js"></

canvas基础——绘制简单的图形

绘制直线: HTML部分: 1 <canvas id="myCanvas" style="border:1px solid #000;" width="200px" height="100px"></canvas> JS部分: 1 window.onload = function(){ 2 var c = document.getElementById('myCanvas'); 3 var contex

canvas基础绘制-arc

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>arc</title> </head> <body> <canvas id="canvas" style="border: 1px solid #ddd;"></canvas&

canvas基础绘制-倒计时(下)

digit_1.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]

canvas基础绘制-倒计时(上)

效果: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>digit</title> </head> <body> <canvas id="canvas"></canvas> <script src="digit

使用canvas绘制动画时钟

一代码 <!DOCTYPE html > <head> <meta charset="UTF-8" > <title>绘制动态时钟</title> <script type="text/javascript"> var canvas; var context; function window_onload() { canvas = document.getElementById("ca

HTML5 Canvas绘制实时时钟

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try to draw the colock</title> <script src="js/modernizr-1.7.js"></script> <script type="text/javascript"> wind

h5+canvas绘制动画时钟

h5+canvas绘制动画时钟 效果图,这个是截图,可以动的, 代码如下: <!DOCTYPE html><html><head><title>动画效果</title></head> <body> <canvas id="anm" width="600" height="600" style="border:1px solid gray"

canvas基础知识

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.检测<canvas id="canvas" width="150" height="200" > 你的浏览器不支持canvas</canvas>var canvas = document.getElementById('canvas');if(canvas.getContext) alert('支持canvas'); >> 绘