Wie zeichnet man eine Uhr auf Leinwand? Der Umsetzungsprozess des Zeichnens einer Ringuhr auf Leinwand

Canvas ist ein neues Element in HTML5, das zum Zeichnen von Bildern verwendet werden kann. Daher wird im folgenden Artikel darauf eingegangen Sie erfahren, wie man mit Leinwand eine Ringuhr zeichnet.

Zuallererst müssen wir wissen, dass die Form einer Ringuhr darin besteht, einen Kreis zu zeichnen und Skalen zu haben, und dann gibt es Stunden- und Minutenzeiger und Sekundenzeiger, und dann wird ein Timer verwendet um die Hände in Bewegung zu setzen.

Dann zeichnen wir auf Leinwand die Uhr basierend auf der Zusammensetzung der Ringuhr.

Werfen wir zunächst einen Blick auf die Funktionen, die zum Zeichnen einer Ringuhr erforderlich sind.

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

2. Abgerundete Linie: canvas.lineCap = "round" ;

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

4. Löschen: Canvas.clearRect(x,y,w,h) .

Nachdem wir die grundlegenden Funktionen und Komponenten kennengelernt haben, die zum Zeichnen einer Ringuhr erforderlich sind, werden wir weiter über die Schritte zum Zeichnen einer Ringuhr auf Leinwand sprechen.

1. Zuerst muss mit dem Zeichnen begonnen werden, nachdem das Dokument geladen wurde. Die Routine hier ist die gleiche wie das wiederholte Schreiben eines Leinwand-Minispiels bestimmte Geschwindigkeit.

Der Code lautet wie folgt:

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

rrree

Anweisungen: Verwenden Sie für jeden Frame zunächst „canvas.clearRect(x,y,w,h)“, um die Pixel zu löschen Andernfalls wird das aktuelle Pixel mit den vorherigen Pixeln überlappt. Das Verschieben des Ursprungs der Leinwand in die Mitte der Leinwand hilft beim Zeichnen von Skalen und Zeigern, die sich basierend auf der Mitte drehen. Der Zustand der Umgebung vor der Übersetzung muss gespeichert werden.

2. Zeichnen Sie alle 6 Grad einen Maßstab und alle 30 Grad einen großen Maßstab. Da der Ursprung in die Mitte verschoben wird, verwenden Sie die mit JavaScript gelieferte Funktion (Math.sin(deg), Math .cos(deg)) Um die x- und y-Koordinaten der Skala zu erhalten, achten Sie darauf, den Winkel in Bogenmaß umzuwandeln.

Der Code lautet wie folgt:

// 加载后开始
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)
}

3. Der Stundenzeiger, der Minutenzeiger und der Sekundenzeiger sind gleich Sie benötigen die Leinwand vor dem Drehen. .save() speichert den aktuellen Zustand (jede Frame-Aktion des Zeigers bewirkt, dass die Leinwand um einen bestimmten Winkel gedreht wird, daher muss die Leinwand nach dem Malen einmal ausgerichtet werden, andernfalls dreht sich der Sekundenzeiger einmal und der Minutenzeiger dreht sich auf dieser Grundlage).

Der Code lautet wie folgt:

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

Hinweis: canvas.save() speichert den aktuellen Canvas-Status im Stapel, canvas.restore() holt den im gespeicherten Status heraus Stapel, der fortgeschritten ist. Es kommt später heraus, sodass canvas.restore() die letzte Speicherung übernimmt.

4. Um einmal zu zeichnen, müssen Sie die zuvor gespeicherte Umgebung aufrufen.

Der Code lautet wie folgt:

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

Weitere Informationen zu Canvas finden Sie im HTML5-Entwicklungshandbuch.

Das obige ist der detaillierte Inhalt vonWie zeichnet man eine Uhr auf Leinwand? Der Umsetzungsprozess des Zeichnens einer Ringuhr auf Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!