H5의 가장 큰 특징은 웹페이지에 다양한 그래픽을 그릴 수 있고, 작은 게임을 만들 수 있다는 점입니다. 캔버스 태그 사용법에 대한 튜토리얼은 인터넷에 많이 있으므로 여기서는 소개하지 않겠습니다. 오늘은 캔버스를 사용하여 작은 시계를 만들어 보겠습니다. 전체 코드는 여기에 있습니다https://github.com/wwervin72/HTML5-Clock.
그래서 우선 이 페이지에서는 두 개의 캔버스를 사용했습니다. 하나는 고정된 시계 문자판과 눈금을 그리는 데, 다른 하나는 시계의 세 바늘을 그린 다음 위치 지정을 사용하여 겹치게 만들었습니다. 그렇다면 여기서는 할 말이 없습니다. 코드는 아래에 첨부되어 있습니다.
<canvas id="plate"> 画表盘 </canvas> <canvas id="needles"> 画时针 </canvas>
var plate=document.getElementById('plate'); var needles=document.getElementById('needles'); needles.setAttribute('style','position:absolute;top:8px;left:8px;'); //这里因为chrome里面,body的magin值为8px,所以我这里就没设为0了。 var cntP=plate.getContext('2d'); var cntH=needles.getContext('2d'); plate.width=800; plate.height=500; needles.width=800; needles.height=500;
이제 준비가 완료되었으므로 시계를 그릴 준비가 되었습니다. 먼저 시계 문자판을 그리는 생성자를 정의했습니다.
function drawclock(cnt,radius,platelen,linewidth,numLen,NUMLEN){ this.cnt=cnt; this.radius=radius; this.platelen=platelen; this.linewidth=linewidth; this.numLen=numLen; this.NUMLEN=NUMLEN; this.getCalibCoor=function(i){ //获得表盘刻度两端的坐标 var X=200+this.radius*Math.sin(6*i*Math.PI/180); var Y=200-this.radius*Math.cos(6*i*Math.PI/180); var x=200+(this.radius-this.platelen)*Math.sin(6*i*Math.PI/180); var y=200-(this.radius-this.platelen)*Math.cos(6*i*Math.PI/180); // 获得分钟数字的坐标 var numx=200+(this.radius-this.platelen-this.numLen)*Math.sin(6*i*Math.PI/180); var numy=200-(this.radius-this.platelen-this.numLen)*Math.cos(6*i*Math.PI/180); //获得小时数字的坐标 var numX=200+(this.radius-this.platelen-this.NUMLEN)*Math.sin(6*i*Math.PI/180); var numY=200-(this.radius-this.platelen-this.NUMLEN)*Math.cos(6*i*Math.PI/180); return {X:X,Y:Y,x:x,y:y,numx:numx,numy:numy,numX:numX,numY:numY}; }; this.drawCalibration=function(){ //画刻度 for(var i=0,coorObj;i<60;i++){ coorObj=this.getCalibCoor(i); this.cnt.beginPath(); this.cnt.moveTo(coorObj.X,coorObj.Y); this.cnt.lineTo(coorObj.x,coorObj.y); this.cnt.closePath(); this.cnt.lineWidth=this.linewidth; this.cnt.strokeStyle='#ddd'; i%5==0&&(this.cnt.strokeStyle='#aaa') &&(this.cnt.lineWidth=this.linewidth*2); i%15==0&&(this.cnt.strokeStyle='#999') &&(this.cnt.lineWidth=this.linewidth*3); this.cnt.stroke(); this.cnt.font='10px Arial'; this.cnt.fillStyle='rgba(0,0,0,.2)'; this.cnt.fillText(i,coorObj.numx-7,coorObj.numy+3); i%5==0&&(this.cnt.fillStyle='rgba(0,0,0,.5)') &&(this.cnt.font='18px Arial') &&(this.cnt.fillText(i/5,coorObj.numX-5,coorObj.numY+5)); } }; } var clock=new drawclock(cntP,200,5,1,10,25); //实例化一个表盘对象 clock.drawCalibration();
여기서 가장 중요한 부분은 스케일과 디지털 도면의 좌표를 얻는 것입니다. 눈금의 시작점을 문자판 가장자리에 두고, 문자판의 반지름에서 눈금의 길이를 빼서 눈금의 끝점 위치를 구하고, 각도와 삼각함수를 이용하여 두 점의 좌표. 마지막으로 다이얼의 눈금을 그릴 수 있습니다. 아래 다이얼에 숫자를 그리는 데에도 동일한 방법이 사용됩니다. 여기서 다이얼의 중심은 (200,200)에 위치합니다. 이 시점에서 우리는 정적 시계 문자판을 그렸습니다.
아래에서는 시계 포인터를 그리기 위한 생성자를 정의합니다.
function clockNeedle(cnt,R,lineWidth,strokeStyle,lineCap,obj){ this.R=R; this.cnt=cnt; this.lineWidth=lineWidth; this.strokeStyle=strokeStyle; this.lineCap=lineCap; this.obj=obj; this.getNeedleCoor=function(i){ var X=200+this.R*0.8*Math.sin(i); //起点的坐标 var Y=200-this.R*0.8*Math.cos(i); var x=200-20*Math.sin(i); //终点的坐标 var y=200+20*Math.cos(i); return {X:X,Y:Y,x:x,y:y}; }; this.drawNeedle=function(){ var d=new Date().getTime(); var angle; switch(this.obj){ case 0: angle=(d/3600000%24+8)/12*360*Math.PI/180; break; case 1: angle=d/60000%60/60*360*Math.PI/180; break; case 2: angle=d/1000%60/60*360*Math.PI/180; break; } var coorobj=this.getNeedleCoor(angle); this.cnt.beginPath(); this.cnt.moveTo(coorobj.x,coorobj.y); this.cnt.lineTo(coorobj.X,coorobj.Y); // this.cnt.closePath(); this.cnt.lineWidth=this.lineWidth; this.cnt.strokeStyle=this.strokeStyle; this.cnt.lineCap=this.lineCap; this.cnt.stroke(); } }
여기서 말해야 할 두 가지가 있습니다. 1. 현재 시간의 밀리초를 얻은 다음 이를 시간으로 변환할 때 모듈로 24를 사용하여 하루의 시간을 계산할 때 여기에 8을 더해야 합니다. lineCap 속성을 사용하려면 위의 경로를 설정할 때 closePath()를 사용하지 마세요.
이 시점에서는 포인터를 그리고 회전할 수 있는 것처럼 보이게 만드는 방법도 필요합니다.
function draw(){ cntH.clearRect(0,0,needles.width,needles.height); var mzneedle=new clockNeedle(cntH,200,1,'rgba(0,0,0,.5)','round',2); //最后一个参数0代表画时针,1画分针,2画秒针 var fzneedle=new clockNeedle(cntH,80,3,'rgba(0,0,0,.4)','round',0); var szneedle=new clockNeedle(cntH,140,2,'rgba(0,0,0,.3)','round',1); mzneedle.drawNeedle(); fzneedle.drawNeedle(); szneedle.drawNeedle(); cntH.arc(200,200,5,0,2*Math.PI); cntH.fillStyle='rgba(0,0,0,.5)'; cntH.fill(); } setInterval(draw,1);
아래 시계 사진 첨부합니다:
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.