Gunakan kanvas untuk melukis kemahiran tutorial clock_html5 yang hebat
Lepaskan： 2016-05-16 15:47:05
asal
1487 orang telah melayarinya
Permulaan pemaparan:
jam kanvas
<script><br>window.onload=draw;<br>function draw() {<br>var canvas=document.getElementById('canvas');<br>var context= canvas.getContext('2d');<br>context.save(); /////////////////////////// // ///Save<br>context.translate(200,200);<br>var deg=2*Math.PI/12; //////////////////////////////Dail<br>konteks.simpan(); beginPath(); <br>for(var i=0;i<13;i ){<br />var x=Math.sin(i*deg);<br />var y=-Math.cos(i*deg );<br />context.lineTo(x*150,y*150); <br />}<br />var c=context.createRadialGradient(0,0,0,0,0,130);<br />c.addColorStop( 0,"# 22f");<br />c.addColorStop(1,"#0ef")<br />context.fillStyle=c;<br />context.fill();<br />context.closePath(); 🎜>konteks(); <br />/////////////////////////////// /////// ///////Nombor<br />context.save();<br />context.beginPath();<br />for(var i=1;i<13;i ){ <br />var x1=Math .sin(i*deg);<br />var y1=-Math.cos(i*deg);<br />context.fillStyle="#fff";<br />context.font= "bold 20px Calibri";<br />context.textAlign='center';<br />context.textBaseline='middle';<br />context.fillText(i,x1*120,y1*120); <br />context.closePath( ); <br />context.restore();/////////////////////// ///////// //////////////Skala besar<br />context.save();<br />context.beginPath(); <br />for(var i=0;i<12;i ) {<br />var x2=Math.sin(i*deg);<br />var y2=-Math.cos(i*deg);<br />context.moveTo(x2 *148,y2*148);<br />context.lineTo(x2*135,y2*135); <br />} <br />context.strokeStyle='#fff';<br />context.lineWidth=4;<br />context.stroke();<br />context.closePath();<br />context.restore(); <br />////////////////// /////////// ////////////////////Skala kecil<br />context.save();<br />var deg1=2* Math.PI/60;<br />context.beginPath (); <br />for(var i=0;i<60;i ){<br />var x2=Math.sin(i*deg1);<br /> var y2=-Math.cos(i*deg1) ;<br />context.moveTo(x2*146,y2*146);<br />context.lineTo(x2*140,y2*140); 🎜>context.strokeStyle='#fff';<br />context.lineWidth=2;<br />context.stroke();<br />context.closePath(); ////////////////////////////////////////////// ///Text<br />context.save();<br />context.strokeStyle="#fff";<br />context.font=' 34px sans-serif';<br />context.textAlign='center'; <br />context.textBaseline='middle';<br /> context.strokeText('canvas',0,65); /////////////// ////////////////////////Tarikh baharu<br />var masa=Tarikh baharu ();<br />var h=(time.getHours() )*2*Math.PI/12;<br />var m=time.getMinutes()*2*Math.PI/60;<br />var s =time.getSeconds()*2*Math.PI/60;
<p>/////////////////////////////////////////// /// //Jam jam<br>context.save();<br>context.rotate( h m/12 s/720) ;<br>context.beginPath();<br>context.moveTo(0,6 );<br>context.lineTo(0,-85);<br>context.strokeStyle="#fff";<br>context.lineWidth=6;<br>context.stroke();<br>context. closePath(); <br>context.restore();<br>//////////////////////////// ///// ////////Minute hand<br>context.save();<br>context.rotate( m s/60 ) ;<br>context.beginPath();<br>context. moveTo(0,8) ;<br>context.lineTo(0,-105);<br>context.strokeStyle="#fff";<br>context.lineWidth=4;<br>context.stroke(); <br>context.closePath ();<br>context.restore();<br>///////////////////////// //////// //////////Second hand<br>context.save();<br>context.rotate( s ) ;<br>context.beginPath();<br>context.moveTo(0,10) ;<br>context.lineTo(0,-120);<br>context.strokeStyle="#fff";<br>context.lineWidth=2;<br>context.stroke ();<br>context.closePath ();<br>context.restore(); <br>context.restore();//////////////// ////////// Timbunkan<br>setTimeout(draw, 1000);///////////////////////// //Pemasa</p>
<p>}</p>
<p></script>
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
Topik-topik yang berkaitan
Lagi>
Apakah kaedah penghasilan penghasilan animasi html5?
Apakah pemalam komposer?
Apakah maksud kadar bingkai?
Bagaimana untuk memasukkan bios pada komputer HP
Apakah perisian pengaturcaraan mikropengawal?
Penyelesaian ralat HTTP 503
Di manakah antara muka audio terletak pada papan induk?
penerangan halaman seo
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
