我畫的秒針從中間斷開了，有一段空白
canvas畫時鐘
西蘭花偉大炮
2016-11-13
4 回答
舉報
0/150
提交
取消
canvas畫時鐘
2016-11-13
舉報
2016-11-28
因為你點的順序弄錯了，先是（-2,20）（2,20）接下來是（1，-r+40）而不是（-1，-r+40）,如果是（-1，-r+40）就會交叉結果就會顯示成中間一條白線
2016-11-24
把秒針的填充寫成
function?drawSecond(second){ ????ctx.save(); ????ctx.beginPath(); ????ctx.fillStyle?='#82CAFF' ????var?rad?=?2?*?Math.PI?/?60?*?second; ????ctx.rotate(rad); ????ctx.lineWidth?=?3; ????ctx.lineCap?=?'round' ????ctx.moveTo(0,?10); ????ctx.lineTo(0,?-r?/?2) ????ctx.lineTo(-1,?-r?+?18); ????ctx.fill(); ????ctx.restore();2016-11-14
<!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繪制環(huán)境*/ ?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(); ????????????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>2016-11-14
應該 不會，你需要貼代碼看看