캔버스에 시계를 그리는 방법은 무엇입니까? 캔버스에 링시계를 그리는 구현과정

Canvas는 HTML5의 새로운 요소입니다. 웹 페이지에 이미지를 그리는 데 사용할 수 있으므로 자연스럽게 링 시계를 그리는 데 사용할 수 있습니다. 그것을 사용하는 방법.캔버스에 반지 시계를 그리는 방법.

우선 우리가 알아야 할 것은 링시계의 모양은 원을 그리고 눈금이 있고, 시침과 분침과 초침이 있고, 타이머를 사용하여 바늘을 움직이게 한다는 것입니다. .

그런 다음 캔버스를 사용하여 링 시계의 구성을 기반으로 시계를 그립니다.

먼저 링시계를 그리는 데 필요한 기능을 살펴보겠습니다.

1. 원: canvas.arc(x,y,r,0,2*Math.PI);

2. 둥근 선: canvas.lineCap = "round";

3. , canvas.textBaseline, canvas.textAlign;/

4 지우기: canvas.clearRect(x,y,w,h).

종시계를 그리는 데 필요한 기본 기능과 구성요소를 알아본 후, 캔버스에 종시계를 그리는 단계에 대해 계속해서 이야기하겠습니다.

우선 문서가 로드된 후 그리기를 시작해야 합니다. SetInterval()은 프레임 애니메이션을 구현합니다. 여기서 루틴은 특정 속도로 그리기와 지우기를 반복하는 것과 같습니다.

코드는 다음과 같습니다:

<canvas id="canvas" width="300px" height="300px">您的浏览器不支持canvas</canvas>

// 加载后开始
document.body.onload = start;
function start(){
    var canvas = document.getElementById("canvas");
    var cxt = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;
    var r = width/2; //半径
    function render(){
        /*
            画钟表静态的元件
         */
    }
    function drawGuid(){
        /*
            画钟表指针
         */
        var now = new Date();
        h = now.getHours();
        m =now.getMinutes();
        s = now.getSeconds();
        drawHour(h,m);
        drawMinute(m,s);
        drawSecond(s);
    }
    setInterval(function(){
        render();
        drawGuid();
    },30/1000)
}

지침: 각 프레임에 대해 먼저 canvas.clearRect(x,y,w,h)를 사용하여 캔버스의 픽셀을 지웁니다. 그렇지 않으면 현재 픽셀과 이전 픽셀이 겹쳐집니다. 캔버스의 원점을 캔버스 중심으로 이동하면 중심을 기준으로 회전하는 스케일과 포인터를 그리는 데 도움이 됩니다. 변환 전의 환경 상태를 저장해야 합니다.

2. 6도마다 눈금을 그리고 30도마다 큰 눈금을 그립니다. 원점이 중앙으로 이동하므로 JavaScript에 제공되는 함수(Math.sin(deg), Math.cos(deg))를 사용합니다. 각도를 라디안으로 변환하는 데 주의하면서 눈금의 x 및 y 좌표를 구합니다.

코드는 다음과 같습니다.

function render(){
    cxt.clearRect(0,0,width,height);
    cxt.save();
    cxt.translate(width/2,height/2);
    // 画轮廓
    cxt.beginPath();
    cxt.lineWidth = r*0.05;//轮廓圆宽度
    cxt.strokeStyle = "#333";//轮廓圆颜色
    cxt.arc(0,0,r-r*0.05,0,2*Math.PI); //圆
    cxt.stroke();
    cxt.closePath();
    // 画内圆
    cxt.beginPath();
    cxt.lineWidth = 1;
    var radi2 = r*0.85; //半径
    cxt.arc(0,0,radi2,0,2*Math.PI); //圆
    cxt.stroke();
    cxt.closePath();
    // 画刻度 使用Math.sin(deg)、Math.cos(deg)来计算圆上点的坐标
    // 每隔6度画一个点
    var hour = [6,5,4,3,2,1,12,11,10,9,8,7],i = 0;
    for(var deg = 0;deg<360;deg=deg+6){
        var spotX = radi2*Math.sin(deg*2*Math.PI/360);
        var spotY = radi2*Math.cos(deg*2*Math.PI/360);
        var spot = r*0.02; //刻度半径
        cxt.beginPath();
        cxt.fillStyle = "#ccc";
        if(deg%30==0){
            cxt.fillStyle = "#333";
            spot = r*0.025;
            var textX =(radi2*0.85)*Math.sin(deg*2*Math.PI/360); //文字x坐标
            var textY =(radi2*0.85)*Math.cos(deg*2*Math.PI/360); //文字y坐标
            cxt.font = r*0.1 + "px Arial"; 
            cxt.textBaseline = "middle";// 文字垂直对齐方式
            cxt.textAlign = "center";   // 文字水平对齐方式
            cxt.fillText(hour[i],textX,textY);
            i++;
        }
        cxt.arc(spotX,spotY,spot,0,2*Math.PI);
        cxt.fill();
        cxt.closePath();
    }
    // 画中心
    cxt.beginPath();
    cxt.arc(0,0,r*0.05,0,2*Math.PI);
    cxt.stroke();
    cxt.closePath();
}

3. 시침, 분침, 초침은 동일합니다. 회전하기 전에 canvas.rotate()를 사용하여 회전해야 합니다. 현재 상태를 저장하는 데 사용됩니다(각 포인터는 캔버스를 특정 각도로 회전하므로 페인팅 후 캔버스를 한 번 펴야 합니다. 그렇지 않으면 초침이 한 번 회전하고 이에 따라 분침이 회전합니다).

코드는 다음과 같습니다:

function drawHour(h,m){
    // 时针
    h = h + m/60;
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/12*h);
    cxt.lineWidth = r*0.05;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.4*0.2);
    cxt.lineTo(0,-r*0.4*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}
function drawMinute(m,s){
    // 分针
    m = m + s/60;
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/60*m);
    cxt.lineWidth = 3;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.6*0.2);
    cxt.lineTo(0,-r*0.6*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}
function drawSecond(s){
    // 秒针
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/60*s);
    cxt.strokeStyle = "#ff004f";
    cxt.lineWidth = 1;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.8*0.2);
    cxt.lineTo(0,-r*0.8*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}

참고: canvas.save()는 현재 캔버스 상태를 스택에 저장하고, canvas.restore()는 스택에 저장된 상태(처음 들어가고 마지막으로 나옵니다)를 꺼냅니다. 따라서 canvas.restore()가 취하는 것이 가장 최근 저장입니다.

4. 한번 그리려면 이전에 저장한 환경을 불러와야 합니다.

코드는 다음과 같습니다.

setInterval(function(){
    render();
    drawGuid();
    cxt.restore();
},30/1000)

마지막으로 캔버스에 대한 자세한 내용은 HTML5 개발 매뉴얼을 참조하세요.

위 내용은 캔버스에 시계를 그리는 방법은 무엇입니까? 캔버스에 링시계를 그리는 구현과정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!