0

我正在研究这个时钟。我对这个文件附带的js没有经验。

这是演示

这是所有代码

如何编辑时钟的表面？

我正在看这个，我想更好地控制手的样子。有人能告诉我是什么让他们走到了一个点。我怎么能把它们变成一条粗线呢？

 // draw hour
ctx.save();
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -5);
ctx.lineTo(-15, 5);
ctx.lineTo(clockRadius * 0.5, 1);
ctx.lineTo(clockRadius * 0.5, -1);
ctx.fill();
ctx.restore();

// draw minute
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -4);
ctx.lineTo(-15, 4);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fill();
ctx.restore();

// draw second
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -3);
ctx.lineTo(-15, 3);
ctx.lineTo(clockRadius * 0.9, 1);
ctx.lineTo(clockRadius * 0.9, -1);
ctx.fillStyle = '#0f0';
ctx.fill();
ctx.restore();

ctx.restore();
}

谢谢！

4

1 回答 1

2

看看每个跟注ctx做这手牌的方法：

ctx.rotate(theta);   // Rotates the canvas according to the hand position.
ctx.beginPath();     // Start drawing a path.
ctx.moveTo(-15, -4); // Set the "brush"/"pen" at center left corner.
ctx.lineTo(-15, 4);  // Draw a line to position center right corner.
ctx.lineTo(clockRadius * 0.8, 1);  // Draw a line to the edge, right corner.
ctx.lineTo(clockRadius * 0.8, -1); // Draw a line to the edge, left corner.
ctx.fill();          // Fill the polygon we just drew.
ctx.restore();       // Rotate the canvas back.

因此，例如，将1and-1值更改为4and-4会生成一个厚矩形面。

可以在这里获得更多学习信息：http: //www.html5canvastutorials.com/tutorials/html5-canvas-lines/

于 2012-04-11T08:57:02.807 回答