118551
Oct 25, 2015
1900
2
0
Zeilen Umbruch in bereits bestehenden Text "Einfügen" JavaScript
hallo heute mal wieder ein wunderbares Thema :D
ich wollte eine Funktion schreiben die es mir ermöglicht ohne viel Theater einen Text auf ein canvas Element zu schreiben
(das geht so weit auch aber leider bis jetzt nur eine Zeile)
HTML [index.html]
JavaScript [iw.js]
aber wenn ich jetzt [ENTER] drücke bekomme ich das Ergebnis der Leertaste!
ich wollte eine Funktion schreiben die es mir ermöglicht ohne viel Theater einen Text auf ein canvas Element zu schreiben
(das geht so weit auch aber leider bis jetzt nur eine Zeile)
HTML [index.html]
<DOCTYPE html>
<html>
<head>
<title>Theres a problem in JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script src="iw.js"></script>
</body>
</html>JavaScript [iw.js]
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var Texte="";
var tasta;
var UpperMode = false;
canvas.style.backgroundColor = "rgb(0,0,0)";
ctx.font = '25pt Calibri'
ctx.fillStyle = "rgb(255,255,255)";
function textOutPutter(str){ // <-- Hier wird die tastatur eingabe verarbeitet
var code=str;
var Y =1;
var X =26;
var sinnfrei="";
var ZS;
switch(str) {
case 81:
tasta="q";
break;
case 87:
tasta="w";
break;
case 69:
tasta="e";
break;
case 82:
tasta="r";
break;
case 84:
tasta="t";
break;
case 90:
tasta="z";
break;
case 85:
tasta="u";
break;
case 73:
tasta="i";
break;
case 79:
tasta="o";
break;
case 80:
tasta="p";
break;
case 65:
tasta="a";
break;
case 83:
tasta="s";
break;
case 68:
tasta="d";
break;
case 70:
tasta="f";
break;
case 71:
tasta="g";
break;
case 72:
tasta="h";
break;
case 74:
tasta="j";
break;
case 75:
tasta="k";
break;
case 76:
tasta="l";
break;
case 89:
tasta="y";
break;
case 88:
tasta="x";
break;
case 67:
tasta="c";
break;
case 86:
tasta="v";
break;
case 66:
tasta="b";
break;
case 78:
tasta="n";
break;
case 77:
tasta="m";
break;
case 32:
tasta=" ";
break;
case 8:
ZS = Texte;
Texte = ZS.substr(0, Texte.length-1);
tasta="";
break;
case 16:
tasta="";
if(UpperMode){
UpperMode = false;
}else{
UpperMode = true;
}
break;
case 13:
tasta="\n";
break;
default:
tasta="";
break;
}
// from left and top 1px, textbox 27
if(Texte == sinnfrei){
if(UpperMode){
tasta = tasta.toUpperCase();
}
Texte = tasta;
console.log("Frei");
}else{
if(UpperMode){
tasta = tasta.toUpperCase();
}
Texte = Texte+tasta;
console.log("Nicht Frei");
}
ctx.clearRect(0,0,800,500);
ctx.fillText(Texte,Y,X);
}
document.onkeydown = function(event) { // <-- Hier wird eine eingabe der tastaur erwartet!
textOutPutter(event.keyCode);
event.cancelBubble = true;
event.returnValue = false;
return event.returnValue;
}aber wenn ich jetzt [ENTER] drücke bekomme ich das Ergebnis der Leertaste!
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 286683
Url: https://administrator.de/contentid/286683
Printed on: April 16, 2024 at 13:04 o'clock
2 Comments
Latest comment
Moin,
das liegt an der Funktion die du nutzt. fillText kann kein Multiline. Zumindest wenn der folgende Artikel vertrauenswürdig ist:
http://stackoverflow.com/questions/5026961/html5-canvas-ctx-filltext-wo ...
Darin sind auch einige Lösungsansätze zu finden
Gruß
Chris
das liegt an der Funktion die du nutzt. fillText kann kein Multiline. Zumindest wenn der folgende Artikel vertrauenswürdig ist:
http://stackoverflow.com/questions/5026961/html5-canvas-ctx-filltext-wo ...
Darin sind auch einige Lösungsansätze zu finden
Gruß
Chris
Danke für deine hilfe ich habe etwas brauchbares gefunden
jetzt bleibt nur noch das ganze für meine funktion anzupassen aber das ist nicht die schwierigkeit
LG DomiZone1
jetzt bleibt nur noch das ganze für meine funktion anzupassen aber das ist nicht die schwierigkeit
LG DomiZone1