How to draw a clock on canvas? The implementation process of drawing a ring clock on canvas

Canvas is a new element in HTML5. It can be used to draw images on web pages. Since it can be used to draw pictures, it can naturally be used to draw a ring clock. Therefore, the following article will share with you about How to draw a ring clock using canvas.

First of all, what we need to know is that the ring clock is composed of a circle and scales, and then there are hour, minute, and second hands, and then a timer is used to make the hands move.

Then we use canvas to draw the clock based on the composition of the ring clock.

Let’s first take a look at the functions required to draw a ring clock.

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

2. Rounded line: canvas.lineCap = "round";

3. Text: canvas.font, canvas.textBaseline, canvas.textAlign;/

4. Erase: canvas.clearRect(x,y,w,h) .

After knowing the basic functions and components required to draw a ring clock, we will continue to talk about the steps of drawing a ring clock on canvas.

1. First of all, drawing needs to start after the document is loaded. SetInterval() implements frame animation. The routine here is the same as writing a canvas mini-game. Draw and erase repeatedly at a certain speed.

The code is as follows:

<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)
}

Instructions: Each frame first uses canvas.clearRect(x,y,w,h) to erase the pixels on the canvas, otherwise This will cause the current pixel to overlap with previous pixels. Moving the origin of the canvas to the center of the canvas helps draw scales and pointers that rotate based on the center. The state of the environment before the translation must be saved.

2. Draw a scale every 6 degrees and a large scale every 30 degrees. Because the origin is moved to the center, use the functions that come with JavaScript (Math.sin(deg), Math.cos(deg)) to obtain the x and y coordinates of the scale, pay attention to convert the angle into radians.

The code is as follows:

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. The hour hand, minute hand, and second hand are all the same. Use canvas.rotate() to rotate around the origin, and canvas is required before rotating. .save() saves the current state (each frame action of the pointer causes the canvas to rotate a specific angle, so the canvas must be straightened once after painting, otherwise the second hand will rotate once and the minute hand will rotate based on this).

The code is as follows:

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();
}

Note: canvas.save() saves the current canvas state to the stack, canvas.restore() takes out the state saved in the stack, which is advanced It comes out later, so canvas.restore() takes the most recent save.

4. To draw once, you need to call the previously saved environment.

The code is as follows:

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

Finally, for more information on canvas, please refer to HTML5 Development Manual.

The above is the detailed content of How to draw a clock on canvas? The implementation process of drawing a ring clock on canvas. For more information, please follow other related articles on the PHP Chinese website!