純粋な HTML5_html5 チュートリアルのスキルを使用して Web ページに時計を記述するためのコード共有-H5 チュートリアル-php.cn

純粋な HTML5_html5 チュートリアルのスキルを使用して Web ページに時計を記述するためのコード共有

WBOY

リリース： 2016-05-16 15:46:23

オリジナル

1911 人が閲覧しました

知っておくべきこと:

canvas タグは単なるグラフィックコンテナです。グラフィックを描画するにはスクリプトを使用する必要があります。デフォルトのサイズ: 幅 300 ピクセル、高さ 150 ピクセル

getContext() メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。 ——コンテキストオブジェクトを取得します。
getContext("2d") オブジェクトのプロパティとメソッド。キャンバス上にテキスト、線、四角形、円などを描画するために使用できます。

fillRect(l,t,w,h): デフォルトの色は黒です stopRect(l,t,w,h): 境界線のある正方形。デフォルトの 1 ピクセルの黒い境界線

setInterval() メソッドは、指定された期間 (ミリ秒単位) に従って関数を呼び出したり、式を計算したりできます。

beginPath(): パスの描画の開始点を定義し、現在の点を (0,0) に設定します。キャンバス環境が最初に作成されるとき、beginPath()
メソッドが明示的に呼び出されます。
closePath(): パス描画終了(始点と終点を結ぶ)

円を描く:
円弧 (x, y, 半径、開始円弧、終了円弧、回転方向)
x, y: 開始位置
円弧と角度の関係: ラジアン= 角度 *Math.PI/180
回転方向: 時計回り (デフォルト: false、反時計回り: true)

コード:

XML/HTML コードコンテンツをクリップボードにコピー

>
<html lang="en-米国「>
<頭>
<メタ charset="UTF- 8">
<タイトル>タイトル>
<スクリプト>
window.onload = function(){
var oC = ドキュメント.getElementById('ch1');
var oGC = oC.getContext('2d');
function drawClock(){
var x = 200; // 指定坐标
var y = 200;
var r = 150; // 指定钟表半径
oGC.clearRect(0,0,oC.width,oC.height);//清空画布
var oDate = new Date(); //创建日期对象
var 営業時間 = 大館 .Gethours (); 変数 🎜>
変数 🎜> 🎜> var var
osenvalue = (-90 osen*6)*math.pi/180; oGC.beginPath();// 開始
for(var i=
0;i<60
;i ){ //i は 60 で、時計の 60 の小さなスケールを表します oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i 1)*Math.PI/180,false); //6 度から 12 度までループします。度
oGC.closePath();
oGC.ストローク();
oGC.beginPath(); oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*(i 1)*Math.PI/180,false);
oGC.closePath();//終了
oGC.fill();
🎜>
's s s s s - to gc.be''s-'s t ----- ogc.beginpath（）;
i=0;i<
;i ){ //i は 12 で、クロックスケールの 12 グリッドを表します
oGC.moveTo(x,y);
‐ =Angle*Math.PI/180
oGC.closePath();
oGC.ストローク();
oGC.beginPath(); oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();//ダイヤルが完了しました
<<>
=
;
oGC.moveTo(x,y);
OGC.LineWidth =
3 ;
oGC.beginPath();//分針の描画を開始
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//分針のサイズとラジアンを設定します
OGC.LineWidth = 1 // 秒針の幅を設定します <🎜; > oGC.beginPath();//秒針の描画開始
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//秒針のサイズと円弧を設定します
oGC.closePath();
oGC.ストローク();
スクリプト>
頭>
<ボディ>
<キャンバス id = "ch1" 幅 = "400px" 高さ = "400px">キャンバス>
ボディ>
html>

デモを表示するには、以下の結果をクリックしてください:
http://jsfiddle.net/eh02450b/2/