首頁猿問為啥我的秒針轉(zhuǎn)動是按照小時轉(zhuǎn)的，而...

Html5

qq_笑的狠牽強_0 2017-03-12 16:55:18

查看完整描述

1 回答

西蘭花偉大炮

TA貢獻376條經(jīng)驗獲得超318個贊

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title></title>
????<style>
????????#canvas{
????????????border:?1px?solid?#e9e0b5;
????????????margin:?200px?auto;
????????????display:?block;
????????}
????</style>
</head>
<body>
<canvas?id="canvas"?width="300"?height="300"></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;

????function?drawbackground(ctx){
????????ctx.save();
????????ctx.translate(r,r);
????????ctx.beginPath();
????????ctx.lineWidth?=?10;
????????ctx.arc(0?,0?,?r-5,?0,?Math.PI?*?2);
????????ctx.stroke();
????????ctx.closePath();
????????ctx.textAlign?=?"center";
????????ctx.textBaseline?=?"middle";
????????ctx.font?=?"18px?Arial";
????????var?hourNumber?=?[3,4,5,6,7,8,9,10,11,12,1,2];
????????hourNumber.forEach(function?(number,i)?{
????????????var?rad?=?Math.PI?*?2?/?12?*?i;
????????????var?x?=?Math.cos(rad)?*?(r?-?40);
????????????var?y?=?Math.sin(rad)?*?(r?-?40);
????????????ctx.fillText(number,x,y);
????????});

????????for(var?i?=?0;i?<?60;i++){
????????????var?raddot?=?Math.PI?*?2?/?60?*?i;
????????????var?x?=?Math.cos(raddot)?*?(r?-?25);
????????????var?y?=?Math.sin(raddot)?*?(r?-?25);
????????????ctx.beginPath();
????????????if(i?%?5?===?0){
????????????????ctx.arc(x,y,3,0,Math.PI?*?2);
????????????????ctx.fillStyle?=?"#000";
????????????}else
????????????{
????????????????ctx.arc(x,y,3,0,Math.PI?*?2);
????????????????ctx.fillStyle?=?"gray";
????????????}
????????????ctx.fill();

????????}
????}
????function?drawhour(hour,minute){
????????ctx.save();
????????ctx.beginPath();
????????var?radhour?=?Math.PI?*?2?/12?*?hour;
????????var?radminute?=?Math.PI?*?2?/12?/?60?*?minute;
????????ctx.rotate(radhour?+?radminute);
????????ctx.lineWidth?=?6;
????????ctx.lineCap?=?"round";
????????ctx.moveTo(0,10);
????????ctx.lineTo(0,-r?+?50);
????????ctx.stroke();
????????ctx.restore();
????}
????function?drawminute(minute){
????????ctx.save();
????????ctx.beginPath();
????????var?radhour?=?Math.PI?*?2?/60?*?minute;
????????ctx.rotate(radhour);
????????ctx.lineWidth?=?3;
????????ctx.lineCap?=?"round";
????????ctx.moveTo(0,15);
????????ctx.lineTo(0,-r?+?40);
????????ctx.stroke();
????????ctx.restore();
????}
????function?drawsecond(second){
????????ctx.save();
????????ctx.beginPath();
????????var?radsecond?=?Math.PI?*?2?/60?*?second;
????????ctx.rotate(radsecond);
????????ctx.moveTo(-2,20);
????????ctx.lineTo(2,20);
????????ctx.lineTo(-1,-r?+?35);
????????ctx.lineTo(1,-r?+?35);
????????ctx.fillStyle?=?"red";
????????ctx.fill();
????????ctx.restore();
????}
????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);
????????ctx.restore();
????}
????draw();
????setInterval(draw,1000);
</script>
</body>
</html>

你又不貼代碼，還要看你課程才知道你問的是什么，看你的問題，應(yīng)該是時間轉(zhuǎn)換錯了，對比一下上面的吧

2 反對回復(fù) 2017-03-12