Background image
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snow</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id='clock' width="420" height="420"></canvas>
<script>
var canvas = document.getElementById('clock');
var ctx = canvas.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width/2;
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "gray";
ctx.arc(0,0,r-5,0,2*Math.PI,false);
ctx.clip();
setInterval(draw,1000);
function drawBackGround(){
ctx.save();
var img = new Image();
img.src = "img/01.jpg";
img.onload = function(){
ctx.drawImage(img,-210,-210,420,420);
for (var i=1;i<=60;i++){
drawClock(i);
}
// 设置字体
ctx.font = "36px bold 黑体";
// 设置颜色
ctx.fillStyle = "red";
// 设置水平对齐方式
ctx.textAlign = "center";
// 设置垂直对齐方式
ctx.textBaseline = "middle";
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
// 绘制文字(参数:要写的字,x坐标,y坐标)
ctx.fillText(hour + " : " + minute, 0, 130);
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
}
ctx.closePath();
ctx.stroke();
}
function drawDot(){
ctx.beginPath();
ctx.fillStyle = '#ffff00'
ctx.arc(0,0,5,0,2*Math.PI,true);
ctx.fill();
}
function draw(){
drawBackGround();
ctx.clearRect(-210,-210,420,420);
ctx.restore();
}
function drawClock(i){
ctx.save();
ctx.beginPath();
var rad = 2*Math.PI/60 * i;
ctx.rotate(rad);
if(i%5 == 0){
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 6;
ctx.moveTo(0,-180);
ctx.lineTo(0,-r);
}else{
ctx.lineWidth = 6;
ctx.strokeStyle = '#ffff00';
ctx.moveTo(0,-190);
ctx.lineTo(0,-r);
}
ctx.fill();
ctx.stroke();
ctx.restore();
}
function drawHour(hour,minute){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = '#ff0000';
var rad = 2*Math.PI/12 * hour;
var mrad = 2*Math.PI/12/60 * minute;
ctx.rotate(rad + mrad);
ctx.lineWidth = 6;
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
function drawMinute(minute){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = '#ffff00';
var rad = 2*Math.PI/60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 4;
ctx.moveTo(0,10);
ctx.lineTo(0,-r+70);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = '#00aa00';
ctx.fillStyle = '#00aa00';
var rad = 2*Math.PI/60 * second;
ctx.rotate(rad);
ctx.lineWidth = 1;
ctx.moveTo(-2,20);
ctx.lineTo(2,20);
ctx.lineTo(1,-r+50);
ctx.lineTo(-1,-r+50);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.restore();
}
</script>
</body>
</html>