html5畫布操作的簡單學習-簡單時針

效果圖

一.什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。

畫布是一個矩形區域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

二.本次學習html5的canvas的簡單函數

getContext(style)-----------獲取canvas畫圖操作對象，style為樣式參數，二維空間2d，三維空間3d

moveTo(x,y)-----------------移動操作

lineTo(x,y)-----------------畫直線

translate(x,y)-------------設置坐標軸的原點

rotate(arc)----------------坐標的旋轉，arc為弧度，弧度=角度*π/180;

store()------------------------展現畫布

clearRect(x1,y1,x2,y2)-----清除長方形的畫布，x1，y1為長方形的起點，x2,y2為長方形的起點對角線的點

三、畫時鐘步驟

1.新建文件clock.html,文件內容如下，以后步驟的代碼都現在script標簽中填寫

瀏覽器不支持畫布操作

2.獲取畫布操作二維空間的操作

var clock=document.getElementById("clock");

var ctx=clock.getContext("2d");

3.畫時鐘邊界--表盤

定義目前畫時鐘的時間

時鐘時間：3點30分45秒

var hour=3;

var min=30;

var sec=45;

//畫表盤

ctx.lineWidth=10;

ctx.strokeStyle="blue";

ctx.beginPath();

ctx.arc(250,250,200,0,360,false);

ctx.closePath();

ctx.stroke();

4.畫時鐘的時刻度

for(var i=0;i<12;i++){

ctx.save();

ctx.lineWidth=7;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(i*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-190);

ctx.lineTo(0,-170);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

5畫時鐘的分或秒的刻度

//畫分鐘刻度

for(var i=0;i<60;i++){

ctx.save();

ctx.lineWidth=5;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(i*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-190);

ctx.lineTo(0,-180)

ctx.closePath();

ctx.stroke();

ctx.restore();

}

6、畫時針

//畫時針

ctx.save();

ctx.lineWidth=10;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(hour*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-120);

ctx.lineTo(0,10);

ctx.closePath();

ctx.stroke();

ctx.restore();

7、畫分針

//畫分針

ctx.save();

ctx.lineWidth=7;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(min*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-150);

ctx.lineTo(0,15);

ctx.closePath();

ctx.stroke();

ctx.restore();

8.畫秒針

//畫秒針

ctx.save();

ctx.lineWidth=5;

ctx.strokeStyle="red";

ctx.translate(250,250);

ctx.rotate(sec*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-160);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

好了經過上述一個固定時間的時鐘已經畫好了，但是時間從來都不會停止的，所以還是不符合業務吧，那現在就通過setInterval循環運行函數來實現走動的時鐘

setinterval('代碼','間隔時間(單位毫秒)')；將上述 步驟的代碼用函數drawClock封裝起來，每秒鐘實現一次setInterval(drawClock,1000);

時間的變量的賦值

var nowDate=new Date();

var hour=nowDate.getHours();

var min=nowDate.getMinutes();

var sec=nowDate.getSeconds();

hour=hour>12?hour-12:hour;

運行起來，秒針會動了，但是有痕跡在，需要用clearRect清除畫布后，在全部重新畫。

整體代碼如下

瀏覽器不支持畫布操作

var clock=document.getElementById("clock");

var ctx=clock.getContext("2d");

function drawClock(){

//清屏

ctx.clearRect(0,0,500,500);

var nowDate=new Date();

var hour=nowDate.getHours();

var min=nowDate.getMinutes();

var sec=nowDate.getSeconds();

hour=hour>12?hour-12:hour;

//畫表盤

ctx.lineWidth=10;

ctx.strokeStyle="blue";

ctx.beginPath();

ctx.arc(250,250,200,0,360,false);

ctx.closePath();

ctx.stroke();

//畫時針刻度

for(var i=0;i<12;i++){

ctx.save();

ctx.lineWidth=7;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(i*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-190);

ctx.lineTo(0,-170);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

//畫分鐘刻度

for(var i=0;i<60;i++){

ctx.save();

ctx.lineWidth=5;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(i*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-190);

ctx.lineTo(0,-180)

ctx.closePath();

ctx.stroke();

ctx.restore();

}

//畫時針

ctx.save();

ctx.lineWidth=10;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(hour*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-120);

ctx.lineTo(0,10);

ctx.closePath();

ctx.stroke();

ctx.restore();

//畫分針

ctx.save();

ctx.lineWidth=7;

ctx.strokeStyle="#000";

ctx.translate(250,250);

ctx.rotate(min*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-150);

ctx.lineTo(0,15);

ctx.closePath();

ctx.stroke();

ctx.restore();

//畫秒針

ctx.save();

ctx.lineWidth=5;

ctx.strokeStyle="red";

ctx.translate(250,250);

ctx.rotate(sec*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-160);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

drawClock();

setInterval(drawClock,1000);

總結

以上是生活随笔為你收集整理的表盘时针的html代码,html5画布操作的简单学习-简单时钟的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。