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.

したがって、たとえば、との値をとに変更する1と、厚い長方形の面が作成されます。-14-4

詳細については、こちらをご覧ください： http ://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

于 2012-04-11T08:57:02.807 に答える