java script 的指針式時鐘怎么寫
慕粉4126927
2017-05-02 19:46:10
3 回答
已采納
咕咕問
TA貢獻78條經驗 獲得超12個贊
css 畫個圓，或者直接弄張png圖片弄個圓出來。 ?然后png圖片弄個時分秒的指針 ? transform ?設置指針的旋轉角度（用js控制css transform的值）
西蘭花偉大炮
TA貢獻376條經驗 獲得超318個贊
<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>畫一個時鐘</title>
????<style>
????????#canvas{
????????????margin:200px?auto;
????????????border:?1px?solid?#e9e0b5;
????????????display:?block;
????????}
????</style>
</head>
<body>
<canvas?id="canvas"?height="300px"?width="300px"></canvas>
<script>
????var?canvas?=?document.getElementById("canvas");
????var?ctx?=?canvas.getContext("2d");
????var?width?=?ctx.canvas.width;
????var?height?=?ctx.canvas.height;
????var?r?=?width?/2;
/*canvas繪制環境*/
????function?drawBackGround(ctx){
????????/*繪制圓框，60點，數字*/
????????ctx.save();
????????ctx.translate(r,r);
????????ctx.beginPath();
????????ctx.arc(0,0,r-5,0,Math.PI?*?2);
????????ctx.lineWidth?=?10;
????????ctx.stroke();
????????ctx.closePath();
????????ctx.font?=?"18px?Arial";
????????ctx.textBaseline?=?"middle";
????????ctx.textAlign?=?"center";
????????var?hoursNumber?=?[3,4,5,6,7,8,9,10,11,12,1,2];
????????/*傳入的number為數組值，i為數組索引*/
????????hoursNumber.forEach(function?(number,i)?{
????????????var?rad?=?2?*?Math.PI?/?12?*?i;
????????????var?x?=?Math.cos(rad)?*?(r?-?30);
????????????/*cos與sin傳入的是弧度值，包括rotate也是弧度，但是css中為deg*/
????????????var?y?=?Math.sin(rad)?*?(r?-?30);
????????????ctx.fillText(number,x,y);
????????});
????????for(var?i=?0;i?<?60;i++){
????????????var?radDot?=?2?*?Math.PI?/?60?*?i;
????????????var?x?=?Math.cos(radDot)?*?(r?-?18);
????????????var?y?=?Math.sin(radDot)?*?(r?-?18);
????????????ctx.beginPath();
????????/*必須在這里beginpath????不然出現被灰圈遮住*/
????????????if(i?%?5?===?0){
???????????????????ctx.arc(x,y,2,0,Math.PI?*2);
????????????????????ctx.fillStyle?=?"#000";
????????????}else
????????????{
????????????????????ctx.arc(x,y,2,0,Math.PI?*2);
???????????????????ctx.fillStyle?=?"gray";
????????????}
????????????ctx.fill();
????????}
????}
????function?drawHour(hour,minnue){
????????ctx.save();
????????ctx.beginPath();
????????var?rad?=?Math.PI?*?2?/?12?*hour;
????????var?mrad?=?Math.PI?*?2?/?12?/?60?*?minnue;
????????/*分針會導致時針的運動，需要加上分針引起的弧度，每分鐘會導致時針變化的弧度*/
????????ctx.rotate(rad?+?mrad);
????????ctx.moveTo(0,10);
????????ctx.lineTo(0,-r?+?48);
????????ctx.lineCap?=?"round";
????????ctx.lineWidth?=?6;
????????ctx.stroke();
????????ctx.restore();
????}
????function?drawMinute(minute){
????????ctx.save();
????????ctx.beginPath();
????????var?rad?=?Math.PI?*?2?/?60?*?minute;
????????ctx.rotate(rad);
????????ctx.moveTo(0,10);
????????ctx.lineTo(0,-r?+?36);
????????ctx.lineCap?=?"round";
????????ctx.lineWidth?=?3;
????????ctx.stroke();
????????ctx.restore();
????};
????function?drawSecond(second){
????????ctx.save();
????????ctx.beginPath();
????????var?rad?=?Math.PI?*?2?/?60?*?second;
????????ctx.rotate(rad);
????????ctx.moveTo(-2,20);
????????ctx.lineTo(2,20);
????????ctx.lineTo(1,-r?+?40);
????????ctx.lineTo(-1,-r?+?40);
????????ctx.fillStyle?=?"#c14543";
????????ctx.fill();
????????ctx.restore();
????};
????function?drawDot(){
????????ctx.beginPath();
????????ctx.fillStyle?=?"#fff";
????????ctx.arc(0,0,3,0,Math.PI?*?2);
????????ctx.fill();
????????/*中間的白點*/
????}
????function?draw(){
????????ctx.clearRect(0,0,width,height);
????????/*每秒進行一次重繪*/
????????var?now?=?new?Date();
????????var?hour?=?now.getHours();
????????var?minute?=?now.getMinutes();
????????var?second?=?now.getSeconds();
????????drawBackGround(ctx);
????????drawHour(hour,minute);
????????drawMinute(minute);
????????drawSecond(second);
????????drawDot();
????????ctx.restore()
????}
????draw();
????setInterval(draw,1000);
</script>
</body>
</html>歡迎明天采納
添加回答
舉報
0/150
提交
取消