HTML5 は多くの機能を実装するのに十分強力であり、時計の描画は単なるガジェットです。ピクチャポインタはctxのdrawImageを利用して実装できます。互換性の問題に関しては、オンラインですでに多くの解決策が公開されています。これは楽しみのためのものであり、アプリケーション用ではありません。 最初にレンダリングをお見せします 実装コード コードをコピーしますコードは次のとおりです: <br>// <![CDATA[ <br /> var time = new Date() <br /> var h = time.getHours( ); <br /> var m = time.getMinutes(); <br /> var s = time.getSeconds(); <br /> var 平日={:'日曜日',:'月曜日',:'火曜日',: '水曜日',:'木曜日',:'金曜日',:'土曜日'} <br /> h=h>?(h-)* parseInt(m/):h* parseInt(m/);初期位置 <br /> //====================================== <br /> var x = ,y=,sAngle=; //x y 原点秒針角度変数<br /> functiondraw() <br /> var c=document.getElementById("myCanvas"); var ctx=c. getContext( "d"); <br /> ctx.clearRect(,,c.width,c.height); <br /> s ;//秒針<br /> //背景<br /> ctx.fillStyle = '#eee ' // 設定を変更します <br /> ctx.globalAlpha = .; <br /> ctx.fillRect(,,c.width,c.height); // 新しい設定で四角形を描画します <br /> //== ==fill(指定) 原点 === <br /> ctx.beginPath(); <br /> ctx.fill(); (); <br /> var grd=ctx.createLinearGradient(x,y,,); <br /> grd.addColorStop(,"#FF"); 🎜> grd.addColorStop(,"#FF"); <br /> ctx.fillStyle=grd; <br /> ctx.fillText("html",,); > ctx.save (); <br /> // タイムスケール <br /> for(var i=;i<;i ) <br /> { <br /> var angle=(Math.PI*)/; .beginPath() ; <br /> var b=i==||i==||i==||i== <br /> if(i%==){ <br /> if(b){ <br /> ctx.fillStyle ="red"; <br /> radius=; <br /> } <br /> else{ <br /> ctx.fillStyle="blue"; <br /> } <br /> ctx .font=" px Arial"; <br /> ctx.fillText(i/==?:i/,x-,y-); //x 大-右 小-左 y サイズの数値スケール<br /> } <br /> else <br /> { <br /> ctx.fillStyle="#"; <br /> radius=; <br /> } <br /> if(s==i)radius=radius; <br /> ctx.arc(x, y-,radius ,,true); <br /> ctx.fill(); <br /> ctx.restore(); //== ======================= <br /> sAngle=(Math.PI*)/*s; //秒<br /> ctx; .save( ); // 時針<br /> ctx.fillStyle="red"; <br /> // ctx.drawingStyle="red"; <br /> ctx.lineWidth=; y,(Math .PI*)/*h,true); <br /> sj(ctx,x,y,x-,y-,x ,y-); ctx.save( );//分針が回転します <br /> ctx.fillStyle="blue"; <br /> ctx.lineWidth=; ,true); <br /> sj(ctx,x,y,x-,y-,x ,y-); <br /> ctx.restore(); <br /> //秒針が回転します。 save(); <br /> ctx.fillStyle="#"; <br /> 変換(ctx,x,y,x-,y-,x , y-); <br /> ctx.restore(); <br /> //データの並べ替え<br /> if(s%==){ <br /> sAngle=,s=,m; <br /> if(m==) ){ // 時針は 1 回転します <br /> if(m!=)h <br /> if(m%==)m=; <br /> if(h%==)h =; <br /> }; " 年" (time.getMonth() ) "月" time.getDate() "日" Weekday[time.getDay()] " h:" time.getHours() " m:" m " s:" s; <br /> document.getElementById("d").innerHTML=dateString; <br /> } <br /> 関数 sj(ctx,x,y,x,y, x,y){ <br /> //====例==== <br /> // ctx.beginPath(); <br /> // ctx.moveTo(x,y) <br /> // ctx .lineTo(x,y-) ; <br /> // ctx.ストローク(); <br /> // ctx.beginPath(); <br /> // <br /> // ctx.moveTo(x-,y-) ); <br /> // ctx .lineTo(x,y-); <br /> // ctx.fill(); (); <br /> ctx.moveTo(x,y); <br /> ctx.beginPath(); moveTo(x,y); <br /> ctx.lineTo(x,y);ctx.lineTo(x,y); <br /> ctx.fill(); <br /> } <br /> //Rotate according to coordinates<br /> function transform(ctx,x,y,angle,b){ <br /> if(b){// Clockwise <br /> ctx.transform(Math.cos(angle), Math.sin(angle), <br /> -Math.sin(angle), Math.cos(angle), <br /> x*(-Math.cos(angle)) x*Math.sin(angle), <br /> y*(-Math.cos(angle)) - y*Math.sin(angle)) <br /> } <br /> } <br /> //======Execute every second============(Execution event optional) <br /> window.setInterval(function(){draw()},) ; <br /> // window.onload=function(){ //The effect is the same as above<br /> // setInterval("draw()",); <br /> // }; <br /> // ]]> <br>