Comment dessiner une horloge sur toile ? Le processus de mise en œuvre du dessin d'une horloge annulaire sur toile

Canvas est un nouvel élément en HTML5. Il peut être utilisé pour dessiner des images sur des pages Web. Puisqu'il peut être utilisé pour dessiner des images, il peut naturellement être utilisé pour dessiner une horloge annulaire. vous explique comment dessiner une horloge annulaire à l'aide d'une toile.

Tout d'abord, ce que nous devons savoir, c'est que la forme d'une horloge annulaire est de dessiner un cercle et d'avoir des échelles, puis il y a des aiguilles des heures, des minutes et des secondes, et ensuite une minuterie est utilisée. pour faire bouger les mains.

Ensuite, nous utilisons une toile pour dessiner l'horloge en fonction de la composition de l'horloge annulaire.

Jetons d’abord un coup d’œil aux fonctions requises pour dessiner une horloge annulaire.

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

2. Ligne arrondie : canvas.lineCap = "round" ;

3. Texte : toile.font, toile.textBaseline, toile.textAlign;/

4. Effacer : toile.clearRect(x,y,w,h) .

Après avoir connu les fonctions et composants de base nécessaires pour dessiner une horloge annulaire, nous continuerons à parler des étapes de dessin d'une horloge annulaire sur toile.

1. Tout d'abord, le dessin doit démarrer après le chargement du document. SetInterval() implémente l'animation d'images. La routine ici est la même que celle d'écrire un mini-jeu sur toile. certaine vitesse.

Le code est le suivant :

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

Explication : Utilisez canvas.clearRect(x,y,w,h) pour effacer le canevas dans chaque pixel d'image est allumé, sinon cela posera le problème de superposition du pixel actuel et du pixel précédent. Déplacer l'origine du canevas vers le centre du canevas permet de dessiner des échelles et des pointeurs qui pivotent en fonction du centre. L'état de l'environnement avant la traduction doit être enregistré.

2. Dessinez une échelle tous les 6 degrés et une grande échelle tous les 30 degrés. Parce que l'origine est déplacée vers le centre, utilisez la fonction fournie avec JavaScript (Math.sin(deg), Math. .cos(deg)) pour obtenir les coordonnées x et y de l'échelle, faites attention à convertir l'angle en radians.

Le code est le suivant :

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. L'aiguille des heures, l'aiguille des minutes et l'aiguille des secondes sont les mêmes. faites pivoter autour de l'origine. Avant de faire pivoter, vous avez besoin de canvas.save() pour enregistrer l'état actuel (chaque image du pointeur déplace la toile selon un angle spécifique, vous devez donc redresser la toile une fois après la peinture, sinon la trotteuse le fera. tournera une fois et l’aiguille des minutes tournera sur cette base).

Le code est le suivant :

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

Remarque : canvas.save() enregistre l'état actuel du canevas dans la pile et canvas.restore() supprime l'état enregistré dans la pile. Il est premier entré, dernier sorti, donc canvas.restore() prend la sauvegarde la plus récente.

4. Pour dessiner une fois, vous devez appeler l'environnement précédemment enregistré.

Le code est le suivant :

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

Enfin, pour plus d'informations sur le canevas, veuillez vous référer au Développement HTML5 Manuel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!