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