+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Probleme mit Canvas (/showthread.php?tid=2818)
Probleme mit Canvas - Derbestetv - 25.03.2024
Hallo ich habe ein Problem mit canvas
hier ist der code da hab ich kommentiert welche zeilen der fehler macht
(ich weiß ich bin kein profi und das mit dem einrücken muss ich noch machen das ist je erstmal nur ein test)
Code:
function layout(ctx,x,y,typ,name,richtung,color_top,color_bottom,color_weiche){
console.log(x+" "+y+" "+color_top)
//ctx.fillStyle = '#8b8c7a'; // Roter Hintergrund
// ctx.fillRect(x+ 1, y+ 1, 139, 71);
if (typ == "Signal"){
if (richtung == "0"){
console.log("test")
}else{
ctx.fillStyle = color_top;
ctx.beginPath();
ctx.fillRect(x + 1, y + 1, 139, 30);
ctx.fillStyle = color_bottom;
ctx.beginPath();
ctx.fillRect(x + 1, y + 30, 139, 41);
var xh = x + 120;
var yh = y + 56;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.fillRect(xh - 85, yh - 11, 42, 22);
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.fillRect(xh - 84, yh - 10, 40, 20);
ctx.fillStyle = "#000000";
ctx.font = "bold 12px Arial";
var width = ctx.measureText(name).width;
////("_______________________");
////(width);
////("_______________________");
ctx.fillText(name, xh - 57 - width, yh + 4);
var xd = xh + 1;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(xd - 30, yh - 40, 7, 300, Math.PI * 2 / 4, false);
ctx.fill();
ctx.beginPath();
ctx.fillRect(xd - 100, yh - 47, 70, 14);
ctx.fill();
ctx.beginPath();
ctx.arc(xd - 100, yh - 40, 7, 900, Math.PI * 2 / 1.3, false);
ctx.fill();
ctx.beginPath();
ctx.fillRect(xd - 25, yh - 42, 10, 4);
ctx.fill();
ctx.beginPath();
ctx.fillRect(xd - 15, yh - 47, 5, 14);
var xs = xd - 30;
var ys = yh + 4;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(xh, yh, 5, 1, Math.PI * 2 / 0.1, false);
ctx.arc(xd, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(xd - 120, yh - 25, 139, 10);
ctx.fill();
ctx.beginPath();
//ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);
ctx.arc(xd - 78, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
ctx.arc(xd - 98, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
//ctx.arc(xh, yh, 3.5, 1, Math.PI * 2 / 0.1, false);
//ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);
//ctx.moveTo(xs, ys - 40);
//ctx.lineTo(xs - 8, ys - 48);
//ctx.lineWidth = 3;
ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);//diese Zeile und die darunter siend die die das problem verursachen
ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);
ctx.moveTo(xd - 30, yh + 4);
ctx.lineTo(xd - 40, yh - 0);
ctx.lineTo(xd - 30, yh - 4);
ctx.rect(xd - 70, yh - 22, 40, 4);
ctx.arc(xd - 70, yh - 20, 2, 900, Math.PI * 2 / 1.3, false);
ctx.arc(xd - 30, yh - 20, 2, 300, Math.PI * 2 / 4, false);
ctx.closePath();
ctx.clip();
}
}
}RE: Probleme mit Canvas - Sempervivum - 25.03.2024
Bei mir sieht das Signal vollkommen OK aus. Gibt es noch mehr Code, der diesen unerwünschten Effekt verursachen könnte?
RE: Probleme mit Canvas - Derbestetv - 25.03.2024
Code:
function tisch(ctx, x, y,loaded, typ, name,richtung,feld_1,feld_2,feld_3,feld_4,feld_5,feld_6,feld_7,feld_8,feld_9,feld_10,feld_11,feld_12,feld_13,feld_14,feld_15,farbe_oben,farbe_unten,farbe_weiche){
feld1 = feld_1.split("-");
feld2 = feld_2.split("-");
feld3 = feld_3.split("-");
feld4 = feld_4.split("-");
feld5 = feld_5.split("-");
feld6 = feld_6.split("-");
feld7 = feld_7.split("-");
feld8 = feld_8.split("-");
feld9 = feld_9.split("-");
feld10 = feld_10.split("-");
feld11 = feld_11.split("-");
feld12 = feld_12.split("-");
feld13 = feld_13.split("-");
feld14 = feld_14.split("-");
feld15 = feld_15.split("-");
posx = 28
posy = 24
layout(ctx,x,y,typ,name,richtung,farbe_oben,farbe_unten,farbe_weiche)
if(feld_1 !== ""){
if (feld1[3].includes(",")) {
var feld1farbe = feld1[3].split(",");
}
var feld1pos = feld1[4].split(",");
//console.log(feld1);
if(feld1[0] == "L"){
if(feld2[2] =="GF" && feld2[5] == "1"){
console.log("GF")
}else{
if(feld1[5] == 1){
if(feld1[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld1[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld1pos[0].includes(".")) {
var feld1posx = feld1pos[0].replace(".","-");
}else{
var feld1posx = feld1pos[0]
}
if (feld1pos[1].includes(".")) {
var feld1posxa = feld1pos[1].replace(".","-");
}else{
var feld1posxa = feld1pos[1]
}
posxvon = x + parseInt(feld1posx)
posxbis = 28 + parseInt(feld1posxa)
//console.log(feld1pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 1, y + 1, posxbis, 24);
ctx.fill();
if(feld1[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld1[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld1[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld1[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 1, y + 1, posxbis, 24);
ctx.fill();
}
}
}
if(feld_2 !== ""){
if (feld2[3].includes(",")) {
var feld2farbe = feld2[3].split(",");
}
var feld2pos = feld2[4].split(",");
//console.log(feld2);
if(feld2[0] == "L"){
if(feld1[2] =="GF" && feld1[5] == "1" ||feld3[2] =="GF" && feld3[5] == "1"){
console.log("GF")
}else{
if(feld2[5] == 1){
if(feld2[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld2[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld2pos[0].includes(".")) {
var feld2posx = feld2pos[0].replace(".","-");
}else{
var feld2posx = feld2pos[0]
}
if (feld2pos[1].includes(".")) {
var feld2posxa = feld2pos[1].replace(".","-");
}else{
var feld2posxa = feld2pos[1]
}
posxvon = x + parseInt(feld2posx)
posxbis = 28 + parseInt(feld2posxa)
//console.log(feld1pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 29, y + 1, posxbis, 24);
ctx.fill();
if(feld2[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld2[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld2[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld2[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 29, y + 1, posxbis, 24);
ctx.fill();
}
}
}
if(feld_3 !== ""){
if (feld3[3].includes(",")) {
var feld3farbe = feld3[3].split(",");
}
var feld3pos = feld3[4].split(",");
//console.log(feld3);
if(feld3[0] == "L"){
if(feld2[2] =="GF" && feld2[5] == "1" ||feld4[2] =="GF" && feld4[5] == "1"){
console.log("GF")
}else{
if(feld3[5] == 1){
if(feld3[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld3[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld3pos[0].includes(".")) {
var feld3posx = feld3pos[0].replace(".","-");
}else{
var feld3posx = feld3pos[0]
}
if (feld3pos[1].includes(".")) {
var feld3posxa = feld3pos[1].replace(".","-");
}else{
var feld1posxa = feld1pos[1]
}
posxvon = x + parseInt(feld3posx)
posxbis = 28 + parseInt(feld3posxa)
//console.log(feld3pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 57, y + 1, posxbis, 24);
ctx.fill();
if(feld3[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld3[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld3[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld3[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 57, y + 1, posxbis, 24);
ctx.fill();
}
}
}
if(feld_4 !== ""){
if (feld4[3].includes(",")) {
var feld4farbe = feld4[3].split(",");
}
var feld4pos = feld4[4].split(",");
//console.log(feld1);
if(feld4[0] == "L"){
if(feld3[2] =="GF" && feld3[5] == "1" ||feld5[2] =="GF" && feld5[5] == "1"){
console.log("GF")
}else{
if(feld4[5] == 1){
if(feld4[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld4[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld4pos[0].includes(".")) {
var feld4posx = feld4pos[0].replace(".","-");
}else{
var feld4posx = feld4pos[0]
}
if (feld4pos[1].includes(".")) {
var feld4posxa = feld4pos[1].replace(".","-");
}else{
var feld4posxa = feld4pos[1]
}
posxvon = x + parseInt(feld4posx)
posxbis = 28 + parseInt(feld4posxa)
//console.log(feld4pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 85, y + 1, posxbis, 24);
ctx.fill();
if(feld4[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld4[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld4[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld4[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 85, y + 1, posxbis, 24);
ctx.fill();
}
}
}
if(feld_5 !== ""){
if (feld5[3].includes(",")) {
var feld5farbe = feld5[3].split(",");
}
var feld5pos = feld5[4].split(",");
//console.log(feld5);
if(feld5[0] == "L"){
if(feld4[2] =="GF" && feld4[5] == "1"){
console.log("GF")
}else{
if(feld5[5] == 1){
if(feld5[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld5[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld5pos[0].includes(".")) {
var feld5posx = feld5pos[0].replace(".","-");
}else{
var feld5posx = feld5pos[0]
}
if (feld5pos[1].includes(".")) {
var feld5posxa = feld5pos[1].replace(".","-");
}else{
var feld5posxa = feld5pos[1]
}
posxvon = x + parseInt(feld5posx)
posxbis = 28 + parseInt(feld5posxa)
//console.log(feld5pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 113, y + 1, posxbis, 24);
ctx.fill();
if(feld5[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld5[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld5[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld5[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 113, y + 1, posxbis, 24);
ctx.fill();
}
}
}
if(feld_6 !== ""){
if (feld6[3].includes(",")) {
var feld6farbe = feld6[3].split(",");
}
var feld6pos = feld6[4].split(",");
//console.log(feld6);
if(feld6[0] == "L"){
if(feld7[2] =="GF" && feld7[5] == "1"){
console.log("GF")
}else{
if(feld6[5] == 1){
if(feld6[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld6[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld6pos[0].includes(".")) {
var feld6posx = feld6pos[0].replace(".","-");
}else{
var feld6posx = feld6pos[0]
}
if (feld6pos[1].includes(".")) {
var feld6posxa = feld6pos[1].replace(".","-");
}else{
var feld6posxa = feld6pos[1]
}
posxvon = x + parseInt(feld6posx)
posxbis = 28 + parseInt(feld6posxa)
//console.log(feld6pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 1, y + 25, posxbis, 24);
ctx.fill();
if(feld6[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld6[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld6[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld6[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 1, y + 25, posxbis, 24);
ctx.fill();
}
}
}
if(feld_7 !== ""){
feld7 = feld_7.split("-");
if (feld7[3].includes(",")) {
var feld7farbe = feld7[3].split(",");
}
var feld7pos = feld7[4].split(",");
//console.log(feld7);
if(feld7[0] == "L"){
if(feld6[2] =="GF" && feld6[5] == "1" || feld8[2] =="GF" && feld8[5] == "1"){
console.log("GF")
}else{
if(feld7[5] == 1){
if(feld7[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld7[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld7pos[0].includes(".")) {
var feld7posx = feld7pos[0].replace(".","-");
}else{
var feld7posx = feld7pos[0]
}
if (feld7pos[1].includes(".")) {
var feld7posxa = feld7pos[1].replace(".","-");
}else{
var feld7posxa = feld7pos[1]
}
posxvon = x + parseInt(feld7posx)
posxbis = 28 + parseInt(feld7posxa)
//console.log(feld7pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 29, y + 25, posxbis, 24);
ctx.fill();
if(feld7[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld7[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld7[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld7[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 29, y + 25, posxbis, 24);
ctx.fill();
}
}
}
if(feld_8 !== ""){
feld8 = feld_8.split("-");
if (feld8[3].includes(",")) {
var feld8farbe = feld8[3].split(",");
}
var feld8pos = feld8[4].split(",");
//console.log(feld8);
if(feld8[0] == "L"){
if(feld7[2] =="GF" && feld7[5] == "1" || feld9[2] =="GF" && feld9[5] == "1"){
console.log("GF")
}else{
if(feld8[5] == 1){
if(feld8[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld8[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld8pos[0].includes(".")) {
var feld8posx = feld8pos[0].replace(".","-");
}else{
var feld8posx = feld8pos[0]
}
if (feld8pos[1].includes(".")) {
var feld8posxa = feld8pos[1].replace(".","-");
}else{
var feld8posxa = feld8pos[1]
}
posxvon = x + parseInt(feld8posx)
posxbis = 28 + parseInt(feld8posxa)
//console.log(feld8pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 57, y + 25, posxbis, 24);
ctx.fill();
if(feld8[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld8[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld8[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld8[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 57, y + 25, posxbis, 24);
ctx.fill();
}
}
}
if(feld_9 !== ""){
if (feld9[3].includes(",")) {
var feld9farbe = feld9[3].split(",");
}
var feld9pos = feld9[4].split(",");
//console.log(feld9);
if(feld9[0] == "L"){
if(feld8[2] =="GF" && feld8[5] == "1" || feld10[2] =="GF" && feld10[5] == "1"){
console.log("GF")
}else{
if(feld9[5] == 1){
if(feld9[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld9[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld9pos[0].includes(".")) {
var feld9posx = feld9pos[0].replace(".","-");
}else{
var feld9posx = feld9pos[0]
}
if (feld9pos[1].includes(".")) {
var feld9posxa = feld9pos[1].replace(".","-");
}else{
var feld9posxa = feld9pos[1]
}
posxvon = x + parseInt(feld9posx)
posxbis = 28 + parseInt(feld9posxa)
//console.log(feld9pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 85, y + 25, posxbis, 24);
ctx.fill();
if(feld9[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld9[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld9[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld9[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 85, y + 25, posxbis, 24);
ctx.fill();
}
}
}
if(feld_10 !== ""){
if (feld10[3].includes(",")) {
var feld10farbe = feld10[3].split(",");
}
var feld10pos = feld10[4].split(",");
//console.log(feld10);
if(feld10[0] == "L"){
if(feld9[2] =="GF" && feld9[5] == "1"){
console.log("GF")
}else{
if(feld10[5] == 1){
if(feld10[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld10[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld10pos[0].includes(".")) {
var feld10posx = feld10pos[0].replace(".","-");
}else{
var feld10posx = feld10pos[0]
}
if (feld10pos[1].includes(".")) {
var feld10posxa = feld10pos[1].replace(".","-");
}else{
var feld10posxa = feld10pos[1]
}
posxvon = x + parseInt(feld10posx)
posxbis = 28 + parseInt(feld10posxa)
//console.log(feld10pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 113, y + 25, posxbis, 24);
ctx.fill();
if(feld10[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld10[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld10[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld10[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 113, y + 25, posxbis, 24);
ctx.fill();
}
}
}
if(feld_11 !== ""){
if (feld11[3].includes(",")) {
var feld11farbe = feld11[3].split(",");
}
var feld11pos = feld11[4].split(",");
//console.log(feld11);
if(feld11[0] == "L"){
if(feld12[2] =="GF" && feld12[5] == "1"){
console.log("GF")
}else{
if(feld11[5] == 1){
if(feld11[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld11[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld11pos[0].includes(".")) {
var feld11posx = feld11pos[0].replace(".","-");
}else{
var feld11posx = feld11pos[0]
}
if (feld11pos[1].includes(".")) {
var feld11posxa = feld11pos[1].replace(".","-");
}else{
var feld11posxa = feld11pos[1]
}
posxvon = x + parseInt(feld11posx)
posxbis = 28 + parseInt(feld11posxa)
//console.log(feld11pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 1, y + 49, posxbis, 23);
ctx.fill();
if(feld11[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld11[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld11[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld11[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 1, y + 49, posxbis, 23);
ctx.fill();
}
}
}
if(feld_12 !== ""){
feld12 = feld_12.split("-");
if (feld12[3].includes(",")) {
var feld12farbe = feld12[3].split(",");
}
var feld12pos = feld12[4].split(",");
//console.log(feld12);
if(feld12[0] == "L"){
if(feld11[2] =="GF" && feld11[5] == "1" || feld13[2] =="GF" && feld13[5] == "1"){
console.log("GF")
}else{
if(feld12[5] == 1){
if(feld12[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld12[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld12pos[0].includes(".")) {
var feld12posx = feld12pos[0].replace(".","-");
}else{
var feld12posx = feld12pos[0]
}
if (feld12pos[1].includes(".")) {
var feld12posxa = feld12pos[1].replace(".","-");
}else{
var feld12posxa = feld12pos[1]
}
posxvon = x + parseInt(feld12posx)
posxbis = 28 + parseInt(feld12posxa)
//console.log(feld12pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 29, y + 49, posxbis, 23);
ctx.fill();
if(feld7[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld12[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld12[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld12[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 29, y + 49, posxbis, 23);
ctx.fill();
}
}
}
if(feld_13 !== ""){
feld13 = feld_13.split("-");
if (feld13[3].includes(",")) {
var feld13farbe = feld13[3].split(",");
}
var feld13pos = feld13[4].split(",");
//console.log(feld13);
if(feld13[0] == "L"){
if(feld12[2] =="GF" && feld12[5] == "1" || feld14[2] =="GF" && feld14[5] == "1"){
console.log("GF")
}else{
if(feld13[5] == 1){
if(feld13[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld13[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld13pos[0].includes(".")) {
var feld13posx = feld13pos[0].replace(".","-");
}else{
var feld13posx = feld13pos[0]
}
if (feld13pos[1].includes(".")) {
var feld13posxa = feld13pos[1].replace(".","-");
}else{
var feld13posxa = feld13pos[1]
}
posxvon = x + parseInt(feld13posx)
posxbis = 28 + parseInt(feld13posxa)
//console.log(feld8pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 57, y + 49, posxbis, 23);
ctx.fill();
if(feld13[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld13[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld13[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld13[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 57, y + 49, posxbis, 23);
ctx.fill();
}
}
}
if(feld_14 !== ""){
if (feld14[3].includes(",")) {
var feld14farbe = feld14[3].split(",");
}
var feld14pos = feld14[4].split(",");
//console.log(feld14);
if(feld14[0] == "L"){
if(feld13[2] =="GF" && feld13[5] == "1" || feld15[2] =="GF" && feld15[5] == "1"){
console.log("GF")
}else{
if(feld14[5] == 1){
if(feld14[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld14[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld14pos[0].includes(".")) {
var feld14posx = feld14pos[0].replace(".","-");
}else{
var feld14posx = feld14pos[0]
}
if (feld14pos[1].includes(".")) {
var feld14posxa = feld14pos[1].replace(".","-");
}else{
var feld14posxa = feld14pos[1]
}
posxvon = x + parseInt(feld14posx)
posxbis = 28 + parseInt(feld14posxa)
//console.log(feld9pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 85, y + 49, posxbis, 23);
ctx.fill();
if(feld14[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld14[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld14[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld14[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 85, y + 49, posxbis, 23);
ctx.fill();
}
}
}
if(feld_15 !== ""){
if (feld15[3].includes(",")) {
var feld15farbe = feld15[3].split(",");
}
var feld15pos = feld15[4].split(",");
//console.log(feld15);
if(feld15[0] == "L"){
if(feld14[2] =="GF" && feld14[5] == "1"){
console.log("GF")
}else{
if(feld15[5] == 1){
if(feld15[3] == "Rt"){
ctx.fillStyle = 'rgba(255, 0, 0,1)';
}else if(feld15[3] == "Bl"){
ctx.fillStyle = 'rgba(100, 100,255,1)';
}else{
ctx.fillStyle = 'rgba(228, 213, 88,1)';
}
}else{
ctx.fillStyle = 'rgba(0, 0, 0,1)';
}
if (feld15pos[0].includes(".")) {
var feld15posx = feld15pos[0].replace(".","-");
}else{
var feld15posx = feld15pos[0]
}
if (feld15pos[1].includes(".")) {
var feld15posxa = feld15pos[1].replace(".","-");
}else{
var feld15posxa = feld15pos[1]
}
posxvon = x + parseInt(feld15posx)
posxbis = 28 + parseInt(feld15posxa)
//console.log(feld150pos)
//console.log(posxvon)
//console.log(posxbis)
ctx.beginPath();
ctx.fillRect(posxvon + 113, y + 49, posxbis, 23);
ctx.fill();
if(feld15[3] == "Rt" ){
ctx.fillStyle = 'rgba(255, 0, 0,0.2)';
}else if(feld15[3] == "Gr"){
ctx.fillStyle = 'rgba(0,255,0,0.5)';
}else if(feld15[3] == "W"){
ctx.fillStyle = 'rgba(228, 213, 88,0.5)';
}else if(feld15[3] == "Bl"){
ctx.fillStyle = 'rgba(0, 0,255,0.5)';
}
ctx.beginPath();
ctx.fillRect(posxvon + 113, y + 49, posxbis, 23);
ctx.fill();
}
}
}
}das ist der code die die felder im hintergrund macht(die die farben ebene und die licht ebene machen
mein problem ist die zeilen hier
Code:
ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);//diese Zeile und die darunter siend die die das problem verursachen
ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);ach ja und die felder(feld_1,etc werden so defieniert "L-N1-HP1-Gr-0,0-0"
RE: Probleme mit Canvas - Sempervivum - 26.03.2024
15 feld-Parameter, wie soll man da jetzt wissen, was da jeweils drin stehen muss. Poste bitte auch einen Aufruf der Funktion tisch mit den Parametern.
RE: Probleme mit Canvas - Derbestetv - 26.03.2024
Code:
<?php
session_start();
$_POST['db1'] = $_SESSION["db"];
require_once "dbconnect.php";
$sql = "SELECT `fdl_bf` FROM `lor_userlogin` WHERE `benutzername` = '" . $_SESSION["benutzer"] . "'";
$result = $con->query($sql);
$sql1 = "SELECT * FROM `spdrs60_stw` WHERE `ort` = '" . $result["fdl_bf"] . "'";
$antwort = $con->query($sql1);
if (!isset($antwort[0])) {
$antwort = [$antwort];
}
foreach ($antwort as $zeichen) {
echo "tisch(ctx, {$zeichen['x']}, {$zeichen['y']}, {$zeichen['loaded']}, \"{$zeichen['typ']}\", \"{$zeichen['name']}\", {$zeichen['richtung']}, \"{$zeichen['feld_1']}\", \"{$zeichen['feld_2']}\", \"{$zeichen['feld_3']}\", \"{$zeichen['feld_4']}\", \"{$zeichen['feld_5']}\", \"{$zeichen['feld_6']}\", \"{$zeichen['feld_7']}\", \"{$zeichen['feld_8']}\", \"{$zeichen['feld_9']}\", \"{$zeichen['feld_10']}\", \"{$zeichen['feld_11']}\", \"{$zeichen['feld_12']}\", \"{$zeichen['feld_13']}\", \"{$zeichen['feld_14']}\", \"{$zeichen['feld_15']}\", \"{$zeichen['farbe_oben']}\", \"{$zeichen['farbe_unten']}\", \"{$zeichen['farbe_weiche']}\");";
}Hier ist die Datenbank wie das signal definiert ist
PS. ich habe in der layout funktion noch die zeile mit
//ctx.moveTo(xs, ys - 40);
//ctx.lineTo(xs - 8, ys - 48);
//ctx.lineWidth = 3;
wenn ich die nicht kommtentiert habe werden die nicht mit ausgeschnitten
RE: Probleme mit Canvas - Sempervivum - 27.03.2024
Aus einem Screenshot kann man keine Testdaten erzeugen. Lass besser die betr. Zeile als JSON-Text ausgeben und poste diesen. Dann kann man problemlos eine Testdatei erzeugen ohne umständlich eine Datenbanktabelle anlegen zu müssen.