java script 的指針式時(shí)鐘怎么寫
慕粉4126927
2017-05-02 19:46:10
3 回答
已采納
咕咕問
TA貢獻(xiàn)78條經(jīng)驗(yàn) 獲得超12個(gè)贊
css 畫個(gè)圓，或者直接弄張png圖片弄個(gè)圓出來。 ?然后png圖片弄個(gè)時(shí)分秒的指針 ? transform ?設(shè)置指針的旋轉(zhuǎn)角度（用js控制css transform的值）
西蘭花偉大炮
TA貢獻(xiàn)376條經(jīng)驗(yàn) 獲得超318個(gè)贊
<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>畫一個(gè)時(shí)鐘</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點(diǎn)，數(shù)字*/
????????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為數(shù)組值，i為數(shù)組索引*/
????????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????不然出現(xiàn)被灰圈遮住*/
????????????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;
????????/*分針會(huì)導(dǎo)致時(shí)針的運(yùn)動(dòng)，需要加上分針引起的弧度，每分鐘會(huì)導(dǎo)致時(shí)針變化的弧度*/
????????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();
????????/*中間的白點(diǎn)*/
????}
????function?draw(){
????????ctx.clearRect(0,0,width,height);
????????/*每秒進(jìn)行一次重繪*/
????????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>歡迎明天采納
添加回答
舉報(bào)
0/150
提交
取消