Question

我正在调查这个时钟。我没有使用此文件附带的js的经验。

以下是demo

以下是code

的全部内容

如何修改时钟的面部？

我正在看这个，我想更多地控制手的样子。有人能告诉我是什么让他们达到了一定程度。我怎么能让他们只是一条粗线？

 // 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();
}

谢谢！

Answer 1

查看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.

因此，举例来说，将1和-1值更改为4和-4会形成一个厚的矩形面。

这里可以获得更多的学习内容：http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

html5画布时钟

1 个答案: