网页如果有影像文档的元素，那么在运行之前，必须下载它。彭博的钟表，就需要从 http://static.oschina.net/uploads/space/2012/0712/125855_nnla_89964.png 下载表盘刻度影像，方可制成钟表。如果，这
http://static.oschina.nethttp://img.558idc.com/uploadfile/space/2012/0712/125855_nnla_89964.png
下载表盘刻度影像，方可制成钟表。如果，这个影像文档，一时得不到，这个钟表就无法正常显示。我有个提议：利用 HTML5 canvas的绘图功能，尽可能以“手工绘制”代替影像文档。
我的贡献：
1. 按照影像文档，“手工绘制”了表盘刻度。
2. 增添了变大、缩小的功能。
新手，望指点。
彭博 2012 年的时钟出处：
http://www.oschina.net/code/snippet_89964_11897
运行本代码见：
http://runjs.cn/detail/4umhjowy
1. [图片] clock.png
2. [文件] clock_ZhongGuanCun.html ~ 5KB 下载(6)
<html>
<head>
<meta charset="utf-8" />
<title>中关村钟表</title>
<script>
/*
根据 开源中国社区 彭博的作品
"http://www.oschina.net/code/snippet_89964_11897"
改进：用手工绘制表盘刻度， 增添变大、缩小功能。
日期：2016-05-26
*/
var canvas, ctx, c, g;
var clockRadius =250;
function locateCircle(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.translate(clockRadius,clockRadius);
c=document.getElementById("myCanvas");
g=c.getContext("2d");
g.translate(clockRadius,clockRadius);
}
function writting(){
document.write("Hello World!");
}
function clockSmaller(){
clockRadius--;
}
function clockBigger(){
clockRadius++;
}
function drawScene() {
//获取即时时间
var date = new Date();
var hours = date.getHours();
var minute = date.getMinutes();
var seconds = date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minute / 60;
// 清频
ctx.clearRect(-clockRadius,-clockRadius ,2*clockRadius ,2*clockRadius);
ctx.beginPath();
ctx.font= 36*clockRadius/250 + 'px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (var n = 1; n <= 12; n++) {
var theta = (n - 3) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
}
// 画时针
ctx.save();
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-clockRadius*0.06, -clockRadius*0.02);
ctx.lineTo(-clockRadius*0.06, clockRadius*0.02);
ctx.lineTo(clockRadius * 0.5, clockRadius*0.01);
ctx.lineTo(clockRadius * 0.5, -clockRadius*0.01);
ctx.fill();
ctx.restore(); // 也可以用 ctx.rotate(-theta);
// 画分针
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-clockRadius*0.06, -clockRadius*0.016);
ctx.lineTo(-clockRadius*0.06, clockRadius*0.016);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fillStyle="orange";
ctx.fill();
ctx.restore(); // 也可以用ctx.rotate(-theta);
// 画秒针
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-clockRadius*0.06, -clockRadius*0.012);
ctx.lineTo(-clockRadius*0.06, clockRadius*0.012);
ctx.lineTo(clockRadius * 0.9, 1);
ctx.lineTo(clockRadius * 0.9, -1);
ctx.fillStyle = '#0f0';
ctx.fill();
ctx.restore(); // 也可以用 ctx.rotate(-theta);
face();
}
function initialization(){
locateCircle();
setInterval('drawScene()', 1000);
}
function face(){
g.save();
g.clearRect(-clockRadius,-clockRadius ,2*clockRadius ,2*clockRadius);
g.font= clockRadius/6 + "px 楷体";
// 创建梯度背景
var gradient=g.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
g.fillStyle=gradient; //设置创建好的梯度背景
g.fillText("中关村",-clockRadius/4,clockRadius/3);
g.fillStyle="green"; //用绿色填充表盘刻度
for(var i=0;i<60;i++){ //画表盘刻度
if (i%5==0){ // 画整点刻度
g.beginPath();
g.moveTo(clockRadius * 0.77, -clockRadius/48);
g.lineTo(clockRadius * 0.96, -clockRadius/48);
g.lineTo(clockRadius * 0.96, clockRadius/48);
g.lineTo(clockRadius * 0.77, clockRadius/48);
g.fill();
} else{ // 画整点以外的分钟刻度
g.beginPath();
g.arc(clockRadius*0.862,0,clockRadius*0.024,0,2*Math.PI);
g.fill();
}
g.rotate(Math.PI/30.0); // 旋转一分钟的度数：6 度
}
g.restore();
}
</script>
<style>
#myCanvas{
z-index:2;
position:absolute;
left:0px;
top:0px;
border:solid 7px #0F9;
}
#canvas{
z-index:3;
}
#clocks{
position:absolute;
left:0px;
top:0px;
}
#controlPanel{
z-index=3;
position:absolute;
left:0px;
top:514px;
width:200px;
}
</style>
</head>
<body onLoad="initialization()" >
<canvas id="myCanvas" width="500" height="500" >
<p>Your browserdoes not support the canvas element!</p
></canvas>
<div class="clocks">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<div id="controlPanel">
<input type ="button" value="缩小" onClick="clockSmaller()" />
<input type="button" value="变大" onClick="clockBigger()" />
</div>
</body>
</html>