キャンバスを使用してHTML5で「時計」パターンを描画するにはどうすればよいですか? (コード例)-H5 チュートリアル-php.cn

キャンバスを使用してHTML5で「時計」パターンを描画するにはどうすればよいですか? (コード例)

青灯夜游

リリース： 2018-09-11 15:17:45

オリジナル

3588 人が閲覧しました

この章では、キャンバスを使用して HTML5 で「時計」パターンを描画する方法を紹介します。 (コード例) は参考になると思います。

1. Canvas の紹介

Canvas は、長さと幅が指定された長方形のキャンバスです。HTML5 JS API を使用してさまざまなグラフィックを描画するために、新しい HTML5 JavaScript を使用します。ただし、キャンバス自体には描画機能はありません (単なるグラフィックスのコンテナです)。実際の描画を行うにはスクリプトを使用する必要があります。

キャンバスを使用する前に、新しいキャンバスを作成する必要があります

2. Canvas でよく使用される属性とメソッド

色とスタイル:

fillStyle 設定またはペイントの塗りつぶしに使用される色、グラデーション、またはパターンを返します
ストロークスタイルストロークに使用される色、グラデーション、またはモードを設定または返します
shadowColor シャドウに使用される色を設定または返します

Rectangle:

rect()四角形を作成します
fillRect () 「塗りつぶされた」四角形を描画します
ストロークRect() 四角形を描画します (塗りつぶしなし)
clearRect() 指定された四角形内の指定されたピクセルをクリアします

Path:

fill() 現在の四角形を塗りつぶします描画 (パス)
ストローク() 定義されたパスを描画します
beginPath() パスを開始するか、現在のパスをリセットします
moveTo() 線を作成せずにパスをキャンバス内の指定された点に移動します
closePath() はリターンを作成します現在の点からのパス開始点までのパス
lineTo() 新しい点を追加し、その点から最後に指定した点までキャンバス内に線を作成します
clip() 元のキャンバスから任意の形状とサイズの領域を切り取ります
quadraticCurveTo() 二次シェルサーレット曲線を作成します
bezierCurveTo() 3 次ベジェ曲線を作成します
arc() 円弧/曲線を作成します (円または部分円の作成に使用されます)
arcTo() 2 つの接線間の円弧/曲線を作成します
isPointInPath() if 指定された点が現在のパス内にある場合は true を返し、それ以外の場合は false を返します

Text:

font テキストコンテンツの現在のフォント属性を設定または返します
textAlign テキストコンテンツの現在の配置を設定または返しますテキストコンテンツ
textBaseline テキストを描画するときに使用する現在のテキストベースラインを設定または返します
fillText() キャンバス上に「塗りつぶされた」テキストを描画します
ストロークText() キャンバス上にテキストを描画します (パディングなし)
measureText() を含むオブジェクトを返します指定されたテキスト幅

Image Draw:

drawImage() 画像、キャンバス、またはビデオをキャンバスに描画します

3. 時計を描画します

まず新しい HTML ファイルを作成し、新しいアートボードを作成しますそして、次のようにアートボードにいくつかのスタイルを追加します

<canvas id="myCanvas" width="200" height="100"></canvas>

ログイン後にコピー

そして、キャンバスの操作を開始します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas画布</title>
		<style type="text/css">
			#canvas {
				border: 1px solid #000;
				margin: 0 auto;
				display: block;
			}
		</style>
	</head>
	<body>
		<!-- 新建画板 --><canvas id="canvas" width="400" height="400"></canvas>
	</body>
</html>

ログイン後にコピー

説明: getContext("2d") オブジェクトは、組み込みの HTML5 オブジェクトであり、パスや四角形を描画するためのさまざまなメソッドがあります。、円、文字、および画像を追加すると、pi が計算され、キャンバスの位置がtranslate()されます。
1. ダイヤル、数字、スケール、中心点を作成する

ダイヤルを作成する

<script>
			//获取canvas标签，并且创建 context 对象 
			var canvas = document.getElementById(&#39;canvas&#39;),
				context = canvas.getContext(&#39;2d&#39;),
				deg = Math.PI / 180;
			context.translate(200, 200);
		</script>

ログイン後にコピー

数値を作成する

context.beginPath();
context.arc(0, 0, 150, 0, 360 * deg);
context.lineWidth = 3;
context.stroke();
context.closePath();

ログイン後にコピー

スケールを作成する

//创建数字
for (var i = 1; i <= 12; i++) {
  context.beginPath();
  context.save();
  context.rotate(30 * i * deg);
  context.textAlign = &#39;center&#39;;
  if (i % 3 == 0) {
      context.fillStyle = &#39;red&#39;;
      context.font = "normal 28px arial";
      context.fillText(i, 0, -110);
  } else {
      context.font = "normal 20px arial";
      context.fillText(i, 0, -120);
  }
  context.restore();
  context.closePath();
}

ログイン後にコピー

中心点を作成する

for (var i = 1; i <= 60; i++) {
    context.beginPath();
    context.save();
    context.rotate(6 * i * deg);
    context.moveTo(0, -150);
    //判断刻度显示颜色
    if (i % 15 == 0) {
        context.strokeStyle = &#39;red&#39;;
        context.lineWidth = 3;
        context.lineTo(0, -135);
        context.stroke();
    } else if (i % 5 == 0) {
        context.strokeStyle = &#39;orange&#39;;
        context.lineWidth = 2;
        context.lineTo(0, -140);
        context.stroke();
    } else {
        context.strokeStyle = &#39;#000&#39;;
        context.lineWidth = 1;
        context.lineTo(0, -145);
        context.stroke();
    }
    context.restore();
    context.closePath();
}

ログイン後にコピー

レンダリング:

キャンバスを使用してHTML5で「時計」パターンを描画するにはどうすればよいですか? (コード例)

2. ポインタを作成する

context.beginPath();
 context.arc(0, 0, 5, 0, 360 * deg);
 context.fill();
 context.closePath();

ログイン後にコピー

レンダリング:

キャンバスを使用してHTML5で「時計」パターンを描画するにはどうすればよいですか? (コード例)

もう終わると思いましたか?大声で言います、いいえ、今は始まりにすぎません、次のステップは奇跡を目撃する瞬間です。。。

3. ついに完成しました

上記の描画をメソッドにカプセル化し、時計が動くように描画とクリアを繰り返す必要があります

var nowdate = new Date(),
     hour = nowdate.getHours() % 12,
     minu = nowdate.getMinutes(),
     second = nowdate.getSeconds();
 var ms = nowdate.getMilliseconds(); //毫秒
 //秒针
 context.beginPath();
 context.save();
 context.lineWidth = 1;
 context.strokeStyle = &#39;red&#39;;
 //context.rotate(6*second*deg);
 context.rotate((ms / 1000 + second) * 6 * deg);
 context.moveTo(0, 20);
 context.lineTo(0, -130);
 context.stroke();
 context.restore();
 context.closePath();
 //分针
 context.beginPath();
 context.save();
 context.lineWidth = 2;
 context.strokeStyle = &#39;orange&#39;;
 //context.rotate((second/60+minu)*6*deg);
 context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
 context.moveTo(0, 10);
 context.lineTo(0, -120);
 context.stroke();
 context.restore();
 context.closePath();
 //时针
 context.beginPath();
 context.save();
 context.lineWidth = 3;
 context.strokeStyle = &#39;#000&#39;;
 //context.rotate((second/3600+minu/60+hour)*30*deg);
 context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
 context.moveTo(0, 0);
 context.lineTo(0, -110);
 context.stroke();
 context.restore();
 context.closePath();

ログイン後にコピー

説明: アニメーションを 1 秒あたり 60 回実行するのが最適です。なぜタイマーによって 1 秒以内に 60 回の実行が可能になったのか。

以上がキャンバスを使用してHTML5で「時計」パターンを描画するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。