canvas时钟
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><canvas id="canvas" width="500" height="500">您的瀏覽器不支持，請更新</canvas><script>//繪制圖片：drawImage(image,dx,dy[,dWidth,dHeight]) 復制圖片：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);//意思為 把一張圖片image放到canvas中，坐標是dx,dy控制圖片位置以canvas左上角為坐標原點，dw,dh控制圖片在canvas中顯示的大小，//sx和sy代表你要從哪開始裁剪圖片，sw和sh代表你要裁剪的那部分的大小//sx,sy,sWidth,sHeight在圖像中指定源矩形，dx,dy,dWidth,dHeight在畫布上指定目標矩形var c=document.getElementById("canvas");//獲取canvas元素var ctx=c.getContext("2d");//獲取渲染上下文function drawClock(){//創建函數ctx.clearRect(0,0,c.width,c.height);//clearRect在給定矩形內清空一個矩形，0，0清空起始點，后兩者為清空圖形長寬var now = new Date();//創建變量時分秒var sec = now.getSeconds();var min = now.getMinutes();var hour = now.getHours();hour = min/60;//60分小時加一hour-hour>12?hour-12:hour;//三元運算符，大于12減去12，小于則不變//表盤ctx.lineWidth=10;//lineWidth 屬性設置或返回當前線條的寬度，以像素計ctx.strokeStyle="deepskyblue";//strokeStyle 屬性設置或返回用于筆觸的顏色、漸變或模式ctx.beginPath();//起始一條路徑，或重置當前路徑ctx.arc(250,250,200,0,360,false);//創建弧/曲線（用于創建圓形或部分圓）//arc(x,y,r,sAngle,eAngle,counterclockwise)//圓中心xy坐標r為半徑，sAngle,eAngle起始角結束角，counterclockwise可選規定應該逆時針(false)還是順時針(true)繪圖。ctx.closePath();//創建從當前點回到起始點的路徑ctx.stroke();//繪制已定義的路徑。//刻度//1.時刻度for(var i=0;i<12;i ){ctx.save();//保存當前環境的狀態。//設置時針粗細ctx.lineWidth-7;ctx.strokeStyle="#000";//設置顏色//設置0，0點ctx.translate(250,250);//重新映射畫布上的(0,0)位置，即從250，250點為起始點開始繪制，而不是畫布左上角的00點//旋轉角度ctx.rotate(i*30*Math.PI/180);//旋轉當前繪圖，旋轉i*30度，共繪制12個時針的刻度ctx.beginPath();//開始一條路徑，從位置0,-170。創建到達位置0,-190的一條線ctx.moveTo(0,-170);//之后就會隨著角度變化而繪制12個時針刻度ctx.lineTo(0,-190);//時針刻度寬7，長20
ctx.closePath();ctx.stroke();ctx.restore();//返回之前保存過的路徑狀態和屬性
}//分刻度for(var i=0;i<60;i ){//注釋同時針
ctx.save();//分刻度粗細ctx.lineWidth-5;ctx.strokeStyle="orangered";//重置ctx.translate(250,250);//旋轉角度ctx.rotate(i*6*Math.PI/180);//旋轉6度的倍數//畫分刻度
ctx.beginPath();ctx.moveTo(0,-180);//分針刻度寬5，長10ctx.lineTo(0,-190);ctx.closePath();ctx.stroke();ctx.restore();}//時針指針
ctx.save();ctx.lineWidth-7;ctx.strokeStyle="#000";//設置異次元空間0，0點ctx.translate(250,250);//設置角度ctx.rotate(hour*30*Math.PI/180);//旋轉角度小時*30
ctx.beginPath();ctx.moveTo(0,-140);//寬度7長度150ctx.lineTo(0,10);ctx.closePath();ctx.stroke();ctx.restore();//分針
ctx.save();ctx.lineWidth-5;ctx.strokeStyle="orangered";//重置ctx.translate(250,250);ctx.rotate(min*6*Math.PI/180);//旋轉角度分*6度
ctx.beginPath();ctx.moveTo(0,-160);ctx.lineTo(0,15);ctx.closePath();ctx.stroke();ctx.restore();//秒針
ctx.save();ctx.strokeStyle="orchid";ctx.lineWidth-3;//重置ctx.translate(250,250);ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();ctx.moveTo(0,-170);ctx.lineTo(0,20);ctx.closePath();ctx.stroke();//設置時針，分針，秒針交叉點
ctx.beginPath();ctx.arc(0,0,5,0,360,false);//半徑5的一個圓
ctx.closePath();//填充樣式//設置筆觸樣式(秒針已設）
ctx.stroke();ctx.fillStyle="wheat";ctx.fill();//設置秒針前段小點
ctx.beginPath();ctx.arc(0,-150,5,0,360,false);//半徑5的一個圓
ctx.closePath();ctx.stroke();ctx.fillStyle="wheat";ctx.fill();ctx.restore();}drawClock();//調用函數setInterval(drawClock,1000);//一秒走一次</script>
</body>
</html>
更多專業前端知識，請上 【猿2048】www.mk2048.com
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： 前端基础-HTML标记语言
- 下一篇： 全局预处理与执行,作用域与作用域链