Ergebnis 1 bis 2 von 2
  1. #1
    dissy555 ist offline Grünschnabel
    registriert
    27-01-2017
    Beiträge
    1

    Canvas Text als Kreis wie bei einem Ring

    Hallo zusammen.
    Ich habe ein "Problem" und hoffe das mir jemand helfen kann.

    Folgendes: Ich habe einen Kreis mit Canvas gezeichnet. diesen kann ich mit winkelangaben drehen. funktioniert soweit super.
    HTML-Code:
    <canvas id="arc" width="200" height="200">
                Dein Browser unterstützt das Canvas-Element nicht.
            </canvas>
           <script>
          
    var zpos=0;
    var zpos2=0;
    var wahl = 0;
    var test=0;
    var minus;
    
    var canvas = document.getElementById('arc');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(100,100,80,0,2*Math.PI);
    context.strokeStyle = "black";
    
    context.stroke();
    context.beginPath();
    context.arc(100,100,5,0,2*Math.PI);
    context.strokeStyle = "black";
    
    context.stroke();
    context.beginPath();
    context.moveTo(85,20);
    context.lineTo(85,100);
    context.lineWidth = 1;
    context.strokeStyle = 'black';
    context.stroke();
    context.beginPath();
    context.moveTo(115,20);
    context.lineTo(115,100);
    context.lineWidth = 1;
    context.strokeStyle = 'black';
    context.rotate(45);
    context.stroke();
    
    function dreh2(wahl){
    	test = wahl;
    	dreh();
    }
    
    function dreh(){
    	
    	if(zpos<test){
    	zpos++;
    var dz=document.getElementById("arc");
    dz.style.transform = "rotate("+zpos+"deg)";
    	
    	window.setTimeout("dreh()", 100);
    	}
    } 
    
    function dreh3(wahl){
    	test = wahl;	
    	
    	dreh4();
    }
    
    function dreh4(){
    	
    	if(zpos>test){
    		
    	zpos--;
    var dz=document.getElementById("arc");
    dz.style.transform = "rotate("+zpos+"deg)";
    	
    	window.setTimeout("dreh4()", 65);
    	}
    } 
    </script>
    
    
    <button onClick="dreh2(zpos+45)" name="b1" value="45 Grad">45 Grad</button>
    <button onClick="dreh2(zpos+20)" name="b2" value="20 Grad">20 Grad</button>
    <button onClick="dreh2(zpos+77)" name="b3" value="77 Grad">77 Grad</button>
    	
    <button onClick="dreh3(zpos-16)" name="b1" value="45 Grad">minus 16 Grad</button>
    <button onClick="dreh3(zpos-20)" name="b2" value="20 Grad">minus 20 Grad</button>
    <button onClick="dreh3(zpos-33)" name="b3" value="77 Grad">minus 33 Grad</button>
    nun möchte ich dazu eine Gradzahlangabe in form von "- - - 10 - - - 20 - - - 30" usw. haben, welche sich dann "mitdreht".

    Leider habe ich keine Idee, wie ich dieses umsetzen kann. der string müsste ja wenn ich keinen Denkfehler habe in einer art Kreis(Ring mit draufsicht) definiert werden, da nach ende ja sofort der Anfang erscheinen muss. zu sehen soll dann immer ungefair eine länge von "-10 - - - 20 -" sein.

    jemand eine Idee wie ich dieses umsetzen kann oder weiss wie man sowas nennt?

    MFg
    dissy555
    Geändert von mikdoe (27-01-2017 um 13:36 Uhr) Grund: Code Tags

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.664

    AW: Canvas Text als Kreis wie bei einem Ring

    Text in einem Canvas auf einem Kreis zu schreiben ist nicht so schwer, aber muss leider per Hand gemacht werden:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Text on a circle</title>
    <style type="text/css"></style>
    </head>
    <body>
    <canvas id="canvas" height="300" width="300"></canvas>
    <script type="text/javascript">
    var context = document.getElementById("canvas").getContext("2d");
    var text = "text on a circle ";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.save();
    context.translate(context.canvas.width / 2, context.canvas.height / 2);
    text.split("").forEach(function(c, i){
    	context.save();
    	context.rotate(i / text.length * 2 * Math.PI);
    	context.fillText(c, 0, -context.canvas.height / 2.2);
    	context.restore();
    });
    context.restore();
    </script>
    </body>
    </html>
    Was du genau mit
    Zitat Zitat von dissy555 Beitrag anzeigen
    zu sehen soll dann immer ungefair eine länge von "-10 - - - 20 -" sein.
    meinst, musst du näher erkären.

Ähnliche Themen

  1. Antworten: 0
    Letzter Beitrag: 14-05-2012, 11:31
  2. Antworten: 0
    Letzter Beitrag: 01-02-2011, 09:24
  3. Ring, ring, ring, bananaphone!
    Von brainshock im Forum Fun
    Antworten: 2
    Letzter Beitrag: 20-05-2004, 20:46
  4. Antworten: 4
    Letzter Beitrag: 22-04-2003, 15:28
  5. Text im Kreis drehen
    Von Nonens im Forum Flash
    Antworten: 7
    Letzter Beitrag: 14-07-2001, 17:13

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •