지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 캔버스를 사용하여 시계 구현 단계 만들기

캔버스를 사용하여 시계 구현 단계 만들기

php中世界最好的语言
풀어 주다： 2017-12-02 14:08:18
원래의
2226명이 탐색했습니다.

H5의 경우 캔버스는 더욱 독특한 곳입니다. 캔버스를 사용하여 다양한 그래픽을 그리고 역동적인 게임을 만들 수 있습니다. 오늘은 캔버스를 사용하여 작은 시계를 만드는 방법을 가르쳐 드리겠습니다.

그래서 우선 이 페이지에서는 두 개의 캔버스를 사용했습니다. 하나는 고정된 시계 다이얼과 눈금을 그리는 데, 다른 하나는 시계의 세 바늘을 그린 다음 포지셔닝을 사용하여 겹치게 만들었습니다. 그렇다면 여기서는 할 말이 없습니다. 코드는 아래에 첨부되어 있습니다.

JavaScript코드를 클립보드에 복사

<canvas id="plate">   
        画表盘   
</canvas>   
<canvas id="needles">   
        画时针   
var plate=document.getElementById(&#39;plate&#39;);   
var needles=document.getElementById(&#39;needles&#39;);   
needles.setAttribute(&#39;style&#39;,&#39;position:absolute;top:8px;left:8px;&#39;);  //这里因为chrome里面，body的magin值为8px，所以我这里就没设为0了。   
var cntP=plate.getContext(&#39;2d&#39;);   
var cntH=needles.getContext(&#39;2d&#39;);   
plate.width=800;   
plate.height=500;   
needles.width=800;   
needles.height=500;
로그인 후 복사

이제 여기준비가 완료되었으니 이제 시계를 그릴 준비가 되었습니다. 먼저 시계 문자판을 그리는 constructor를 정의했습니다.

JavaScript 코드는 콘텐츠를 클립보드에 복사합니다

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=&#39;#ddd&#39;;   
                    i%5==0&&(this.cnt.strokeStyle=&#39;#aaa&#39;)   
                    &&(this.cnt.lineWidth=this.linewidth*2);   
                    i%15==0&&(this.cnt.strokeStyle=&#39;#999&#39;)   
                    &&(this.cnt.lineWidth=this.linewidth*3);   
                    this.cnt.stroke();   
  
                    this.cnt.font=&#39;10px Arial&#39;;   
                    this.cnt.fillStyle=&#39;rgba(0,0,0,.2)&#39;;   
                    this.cnt.fillText(i,coorObj.numx-7,coorObj.numy+3);   
                    i%5==0&&(this.cnt.fillStyle=&#39;rgba(0,0,0,.5)&#39;)   
                        &&(this.cnt.font=&#39;18px Arial&#39;)   
                        &&(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)에 놓았습니다. 이 시점에서 우리는 정적 시계 문자판을 그렸습니다.

아래에서는 시계 바늘을 그리기 위한 생성자를 정의합니다.

JavaScript 코드는 콘텐츠를 클립보드에 복사합니다

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를 사용하여 2. lineCap 속성을 사용하려면 위의 경로를 설정할 때 closePath()를 사용하지 마세요.

이 시점에서도 포인터를 그리고 회전할 수 있는 것처럼 보이도록 만드는 방법이 여전히 필요합니다.

콘텐츠를 클립보드에 복사하는 JavaScript 코드

function draw(){   
            cntH.clearRect(0,0,needles.width,needles.height);   
            var mzneedle=new clockNeedle(cntH,200,1,&#39;rgba(0,0,0,.5)&#39;,&#39;round&#39;,2);   
            //最后一个参数0代表画时针，1画分针，2画秒针   
            var fzneedle=new clockNeedle(cntH,80,3,&#39;rgba(0,0,0,.4)&#39;,&#39;round&#39;,0);   
            var szneedle=new clockNeedle(cntH,140,2,&#39;rgba(0,0,0,.3)&#39;,&#39;round&#39;,1);   
            mzneedle.drawNeedle();   
            fzneedle.drawNeedle();   
            szneedle.drawNeedle();   
            cntH.arc(200,200,5,0,2*Math.PI);   
            cntH.fillStyle=&#39;rgba(0,0,0,.5)&#39;;   
            cntH.fill();   
 }   
 setInterval(draw,1);
로그인 후 복사


이 사례를 읽고 나면 방법을 마스터하셨으리라 믿습니다. , more PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

관련 자료:

Js를 사용하여 HTTP 쿠키를 작동하기 위한 구현 단계

Js 운영 BOM 개체 모델에 대한 자세한 소개

로컬 웹 저장소 저장소에 대한 자세한 소개

위 내용은 캔버스를 사용하여 시계 구현 단계 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
canvas 성취하다 단계
원천：php.cn
이전 기사：HTML5 및 CSS3의 브라우저 호환성 문제 다음 기사：H5의 postMessage API에 대한 자세한 그래픽 및 텍스트 설명 자세한 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
캔버스의 *두* 높이 값을 얻으시겠습니까? 이 캔버스의 두 가지 높이 값을 얻으려고 합니다. <canvaswidth="886"height="792"style=&qu...
에서 2024-04-05 09:32:33
0
1
1360
여러 캔버스에서 jpg를 내보내는 방법 레이어로 사용되는 캔버스가 여러 개 있습니다. canvasc1=Backgroundimage.canvasc2=charactorimage.canvasc3=itemim...
에서 2024-04-03 21:02:43
0
1
319
Vite React 프로젝트를 저장할 때마다 기존 캔버스 요소를 바꾸는 대신 새 캔버스 요소가 페이지 본문에 추가되는 이유는 무엇입니까? 저는 ThreeJ를 배우기 시작하려고 합니다(저는 Javascript 웹 개발도 처음입니다). 몇 가지 튜토리얼을 본 후 Vite 및 React로 시작한 다음 기...
에서 2024-03-30 09:57:49
0
1
396
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿