版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wbdsr234/article/details/68941536
canvas钟表的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style></style>
</head>
<body>
<canvas id="cav" width="600" height="600"></canvas>
<script>
var cav = document.getElementById('cav');
var cax = cav.getContext('2d');
function clock(){
var img = new Image();
img.src = 'psb.jpg';
img.onload = function(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
cax.clearRect(0,0,600,600);
cax.save();
cax.save();
cax.globalAlpha = 0.8;
cax.globalCompositeOperation = "destination-atop";
cax.drawImage(img,0,0,420,420);
cax.fillStyle = "#000";
cax.arc(210,210,200,0,2*Math.PI);
cax.shadowColor = "#000";
cax.shadowBlur = "30";
cax.fill();
cax.restore();
cax.translate(210,210);
/*表盘长线*/
for(var i = 0; i < 12;i++){
cax.beginPath();
cax.strokeStyle = "#fff";
cax.lineWidth = 6;
cax.moveTo(0,-180);
cax.lineTo(0,-195);
cax.stroke();
cax.closePath();
cax.rotate(Math.PI/6);
}
/*表盘短线*/
for(var i = 0;i < 60;i++){
if(i%5){
cax.beginPath();
cax.strokeStyle = '#fff';
cax.lineWidth = 2;
cax.moveTo(0,-180);
cax.lineTo(0,-190);
cax.stroke();
cax.closePath();
}
cax.rotate(Math.PI/30);
}
/*秒针走动*/
cax.save();
cax.beginPath();
cax.rotate(s*Math.PI/30);
cax.strokeStyle = "red";
cax.lineWidth = 2;
cax.moveTo(0,10);
cax.lineTo(0,-170);
cax.stroke();
cax.closePath();
cax.restore();
/*分针走动*/
cax.save();
cax.beginPath();
cax.rotate(m*Math.PI/30 + (s*Math.PI/30/60));
cax.strokeStyle = "#000";
cax.lineWidth = 3;
cax.moveTo(0,10);
cax.lineTo(0,-150);
cax.stroke();
cax.closePath();
cax.restore();
/*时针走动*/
cax.save();
cax.beginPath();
cax.rotate(h*Math.PI/6 + (m*Math.PI/360));
cax.strokeStyle = "#000";
cax.lineWidth = 4;
cax.moveTo(0,10);
cax.lineTo(0,-120);
cax.stroke();
cax.closePath();
cax.restore();
cax.restore();
}
}
setInterval(function(){
clock();
},1000);
</script>
</body>
</html>