[FRAGE] Canvas Text als Kreis wie bei einem Ring

dissy555 · 27. Jan. 2017

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:

<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

kkapsner · 28. Jan. 2017

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

dissy555 schrieb:
zu sehen soll dann immer ungefair eine länge von "-10 - - - 20 -" sein.

meinst, musst du näher erkären.

[FRAGE] Canvas Text als Kreis wie bei einem Ring

dissy555

New member

kkapsner

Super Moderator