この記事の例では、Webクロックを描画するJS+HTML5の方法について説明します。 Webページで使用できる振り子で時計を描画します。ボタンを通してサイズと位置で調整できます。特定の実装コンテンツは次のとおりです。
<html> <head> <メタhttp-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> clock </title> <script type = "text/javascript"> var xclock = 300; //中心位置Var yclock = 250; //中心位置Var d = 180.0; //クロックの中心半径の中心部面表面var値= -d*1.07;関数拡大（）{d ++;}関数resid（）{d-;}関数westward（）{var c = document.getElementbyId（ "mycanvas"）; var g2d = c.getContext（ "2d"）; g2d.translate（-1,0）; //軸の原点を表の中心に設定しますc = document.getElementById（ "myPendulum"）; g2d = c.getContext（ "2d"）; g2d.translate（-1,0）; //軸の原点を表の中心に設定しますc = document.getElementById（ "mycanvas"）; var g2d = c.getContext（ "2d"）; g2d.translate（1,0）; //軸の原点を表の中心に設定しますc = document.getElementById（ "myPendulum"）; g2d = c.getContext（ "2d"）; g2d.translate（1,0）; //テーブルの中心に軸を設定します} function upward（）{var c = document.getElementById（ "mycanvas"）; var g2d = c.getContext（ "2d"）; g2d.translate（0、-1）; //軸を表の中心に設定しますc = document.getElementById（ "myPendulum"）; g2d = c.getContext（ "2d"）; g2d.translate（0、-1）; //軸をテーブルの中心に設定します}関数は下向き（）{var c = document.getElementById（ "mycanvas"）; var g2d = c.getContext（ "2d"）; g2d.translate（0,1）; //軸を表の中心に設定しますc = document.getElementById（ "myPendulum"）; g2d = c.getContext（ "2d"）; g2d.translate（0,1）; //テーブルの中心に軸を設定します}関数fillpolygon（a、b、fillcolor、ctx）{ctx.beginpath（）; ctx.moveto（a [0]、b [0]）; for（var j = 1; j <a.length; j ++）ctx.lineto（a [j]、b [j]）; ctx.closepath（）; ctx.fillstyle = fillcolor; ctx.fill（）;} function randomcolor（）{var s = "＃"; Math.floor（Math.random（）*16）.ToString（16）; return s;} function locatecoordinate（）{var c = document.getElementById（ "mycanvas"）; var g2d = c.getContext（ "2d"）; g2d.translate（xclock、yclock）; //座標軸をテーブルの中心に設定しますvar c = document.getElementById（ "mypendulum"）; var g2d = c.getContext（ "2d"）; g2d.translate（xclock、yclock）; //座標軸をテーブルの中心に設定します} function drawface（）{//クロックの表面にdrawfaceメソッドを定義します/*ダイヤモンドマーク頂点座標のクロックの表面のdrawfaceメソッドを定義します。 var y = new Array（math.round（-d*1.07）、 - d、math.round（-d*0.9）、 - d）;/*3、6、9、および12 o'clock*/var x1 = new Array（0、math.round（d/15）; round（d/15）; round（d/15）の位置を表す大きなサイズの頂点座標の配列array（math.round（-d*1.13）、 - d、math.round（-d*0.9）、 - d）; var c = document.getelementbyid（ "mycanvas"）; var g2d = c.getContext（ "2d"）; // beginpath（）; g2d.arc（0,0、d、0、2*math.pi）; g2d.strokestyle = "lightgray"; g2d.linewidth = d/18; g2d.stroke（）; //最後のストローク、クロック円の端を描く//（var i = 0; i <12; i ++）{//ループステートメントのループ本体の場合、1時間を表すダイヤモンドを描く準備を始めます（i％3 == 0）{// 3,6,9,12ポイントのfillpolygon（x1、y1の "" g2d）; } else {//小さなオレンジ色のダイヤモンドを描画して、残りの時間を表すfillpolygon（x、y、 "orange"、g2d）; } //クロックの中心を原点として使用すると、座標系は時計回りに30度回転し、次の時間位置G2D.rotate（Math.Pi/6.0）のダイヤモンドマークを描画します。 } //ループのループボディエンドの場合は、ループステートメントの端} //ドローフェースメソッドクロック表面の端/ *時間の手、微細な手、およびクロックの秒針を定義する方法 *フォーマルパラメーターhradian、unit radianは、0ポイントから計算されたhangh handのラジアン位置です。秒針のラジアン位置は0秒から計算されました。 */function Drawneedles（Hradian、Mradian、Sradian）{var c = document.getelementbyid（ "mycanvas"）; var g2d = c.getContext（ "2d"）; //時間のポリゴン頂点を表す座標var hx = new Array（0、math.round（d/19）、0、math.round（-d/19））; var hy = new Array（math.round（-d/2）、math.round（-d/3）、0、math.round（-d/3））; fillpolygon（hx、hy、 "magenta"、g2d）; //時間の手を紫に赤に設定します。 //クロックセンターを原点として取り、Mradian Radianを時計回りに回転させて、微細な手g2d.rotate（Mradian）; var my = new Array（0、math.round（-d/1.3）、0）; fillpolygon（mx、my、 "gray"、g2d）; //微小手を灰色に設定します//クロックを原点として取得すると、座標系はMradian radianを反時計回りに回転させて、座標系G2D.rotate（-mradian）を復元します。 //クロックを原点として使用すると、座標系はスラジアンラジアンを時計回りに回転させて、秒針G2D.rotate（スラジアン）を描画します。 //ランダムカラーg2d.strokestyle = 'green'への秒針; g2d.linewidth = "1"; g2d.moveto（0,0）; g2d.lineto（0、math.round（-d/1.1））; g2d.stroke（）; g2d.beginpath（）; g2d.arc（0、math.round（-d）、d/18、0、2*math.pi）; g2d.fillstyle = randomcolor（）; g2d.fill（）; //最後のストロークの場合、秒針の頂点で小さなボールを描画します//クロックの中心を原点として取り、反時計回りにスラジアンラジアンを回転させて、座標系G2D.rotate（-sradian）を復元します。 } //描画針メソッドのコードブロック描画/*文字列を描画して、瞬間時間を表す*/function drawtime（）{var time = new date（）; //現在の時間を取得します。 var hour = time.gethours（）; // hour hour var minute = time.getMinutes（）を取得します。 // minute var second = time.getSeconds（）を取得します。 //秒数var apm = "am"; //デフォルトの表示朝：am。 var canvas = document.getElementById（ "mycanvas"）; var g2d = canvas.getContext（ "2d"）; if（hour> 12）{//時間= hour-12を表示するのを停止します。 APM = "PM"; } if（minute <10）{// 1分に1桁のみがある場合、0を追加してminute = "0"+minutsを表示します。 } if（second <10）{//秒数が1桁のみの場合、0を追加してsecond = "0"+secondを表示します。 } g2d.ClearRect（-XClock、-Clock、600,600）; // Clean Screen var s = hour+"："+minute+"："+second+"："+apm; g2d.fillstyle = "red"; g2d.font = d/4+ "px kaiti"; g2d.filltext（s、-d/1.8、d*1.4）; g2d.font = d/4 + "px kaiyi"; // gradientvarを作成しますGradient = g2d.createlineargradient（0,0、canvas.width、0）; gradient.addcolorstop（ "0"、 "magenta"）; gradient.addcolorstop（ "0.5"、 "blue"）; gradient.addcolorstop（ "1.0"、 "red"）; gradientg2d.fillstyle = gradient; g2d.filltext（ "big data"、 - d/2.6、d/2）; //インスタンス作成モーメントの2回目の読み取りを取得し、0秒と比較して秒手の弧読み取りを計算します。 //作成の瞬間の微細な読み取りを取得し、微細な手のアーク読み取り、var b = math.pi/30 * minut;/ *作成モーメントの時間読み取りを取得し、時間のポイントと比較して時間の手の弧読み取りを計算し、時間の手のアーク読み取りを計算します。 *時間の手を散歩するラジアンの程度は時給（時速30度）に加えて、渡された分の修正値*/var a = math.pi/180*（30* hour + minute/2）;描画（a、b、c）; } //メソッドのコードブロックdrawtime var i = 0; function pendulum（）{// pendulum_bobvar instantangle = newアレイ（64,61,56,49,40,29,16,3、-8、-16、-29、-40、-49、-56、-61、-64、 - -61、-64、-61 64、-64、-61、-56、-49、-40、-29、-16、-8,3,16,29,40,49,56,61,64,64）; // Pendulumのリアルタイムアングルアレイvar C = document.getElementById（ "myPendulum"）; var ctx = c.getContext（ "2d"）; var alpha = instantangle [i ++％instantangle.length] //ランダムカラーCTX.FILLSTYLE = 'Brown'に秒針を設定します。 ctx.fillrect（-3,0,6、d*1.4）; ctx.shadowblur = 20; ctx.shadowcolor = "black"; ctx.fillstyle = "blue"; // ctx.fillrect（-d/3.5、d*1.35、d/1.6、d/4.4）; ctx.font = "40px kaiyi"; // gradientvar gradient = ctx.createlineargradient（0,0、c.width、0）; gradient.addcolorstop（ "0"、 "magenta"）; gradient.addcolorstop（ "0.5"、 "blue"）; gradient.addcolorstop（ "0.5"）; gradient.addcolorstop（ "0.5"）; gradient // ctx.fillstyle = gradient; ctx.fillstyle = "red"; ctx.filltext（ "BIG DATA"、-D/3.2、D*1.55）; ctx.shadowblur = 0; ctx.shadowcolor = null; ctx.fillstyle = null; ctx.rotate（-alpha）; } function preation（）{locateCoordinate（）setInterval（ 'drawTime（）'、500）; setInterval（ 'pendulum（）'、200）;} </script> <style> #mycanvas {z-index：3;位置：絶対;左：0px;上：0px; } #mypendulum {z-index：2;位置：絶対;左：0px; TOP：0px;}＃controlpanel {position：absolute;左：600px;上：0px;幅：100px;テキストアライグ：センター;フォントファミリー： "Kaiti";フォントサイズ：20px; font-weight：bold;色：＃6c0;} </style> </head> <body onload = "preparied（）"> <canvas id = "mycanvas"> <p>あなたのブラウザーはキャンバス要素をサポートしていません！</p> </canvas id = "controlpanel"> <table> <tr> <td> control </td> <td> button </td> </tr> <td> <input値= "拡大"タイプ= "ボタン" onclick = "拡大（）"> </button> </button> </td> <td> <入力値= <tr> <td> <入力値= "left" type = "button" onclick = "westward（）"> </button> </td> <td> <input value = "right" inclick = "eastward（）"> </button> </td> </tr> <tr> <td> <入力値onclick = "upwards（）"> </button> </td> <td> <input値= "downwards" type = "button" onclick = "downward（）"> </button> </td> </tr> </table> </div> </body> </html>複製画像：
この記事がすべての人のWebプログラミングに役立つことを願っています。