Beiträge von Jochen

    Hi


    kriege es nicht ans Laufen. Finde auch nirgendswo ein Beispiel



    <!DOCTYPE html>

    <html>

    <head>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

    <title>Move to Click Position</title>

    <style type="text/css">

    </style>

    </head>

    <body>

    <canvas width="300" height="150"></canvas>

    <body >

    <script>


    var $myCanvas=$('#myCanvas');


    $('myCanvas').drawArc({

    fillStyle: 'black',

    x: 100, y: 100,

    radius: 50

    });

    </script>


    </body>

    </html>


    bringt Fehlermeldung: TypeError: $(...).drawArc is not a function

    Guten Morgen,


    ich will jetzt jscanvas einsetzen. Aber ich bekomme die "insallation nicht hin.


    Der Aufruf


    <head>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

    <script src="jcanvas.min.js"></script>


    bringt die Meldung;


    Laden fehlgeschlagen für das <script> mit der Quelle "http://127.0.0.1/jcanvas.min.js".


    ??


    LG

    Jochen

    Vielleicht ist transparent nicht richtig. Ich möchte eine schwarze Schrift auf rotem Hintergrund haben.

    So wie zum Beispiel hier auf dieser Seite on Top " HTML Seminar" auf blauem Hintergrund zu sehen ist.



    zu weiter oben .

    es gibt nur das einCanvas :

    1. var c = document.getElementById("myCanvas");


    muss ich dann ,siehe Bild, mehrere Canvas anlegen wenn ich z.B. unterschiedliche Schriften haben will?,

    Fehlte noch die Frage:


    Und dann noch eine Frage.



    ctx1.fillStyle = '#FB0716';

    ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

    ctx1.fillRect(links,100,200,60);

    ctx1.stroke();



    ctx2.fillText(("Punkte"),links + 250 +10,100+gFont+ recHoehe/2);

    ctx2.fillRect(links+250,100,100,60);

    ctx2.stroke();


    warum hat ctx2 die Farbe von ctx1 übernommen?

    Sind doch zwei verschiedene Objekte , oder ????=

    Grüß Gott,


    irgendwie bekomme ich es nicht hin, dass eine Schrift vor einem farbigen Hintergrund zu lesen ist.

    Ich habe es mit ctx.globalAlpha = 0.2 probiert, hat mal funktioniert, dann wieder nicht. Warum?? Keine Ahnung.


    ctx1.fillStyle = 'red';

    ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

    ctx1.fillRect(links,100,200,60);

    ctx1.stroke();

    Ich möchte dass Rechteck rot und davor die Schrift in Schwarz.


    Und dann noch eine Frage.



    ctx1.fillStyle = '#FB0716';

    ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

    ctx1.fillRect(links,100,200,60);

    ctx1.stroke();



    ctx2.fillText(("Punkte"),links + 250 +10,100+gFont+ recHoehe/2);

    ctx2.fillRect(links+250,100,100,60);

    ctx2.stroke();


    Genauso wenn ich am Anfang schreibe

    ctx1.font = 20px Arial";


    , dann haben alle

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    var ctx1 = c.getContext("2d");

    var ctx2 = c.getContext("2d");

    var ctx3 = c.getContext("2d");

    var ctx4 = c.getContext("2d");


    20 px in Ariel?


    Warum?????:cursing::cursing::cursing::cursing::cursing::cursing::evil::evil::evil::evil::evil:


    LG


    Jochen








    warum hat ctx2 die farbe von ctx1. Sind das nicht zwei verschiedene Objekte oder wie man das nennt?


    LG


    Jochen

    Grüß Gott miteinander,


    kann man die font Größe auch variabel angeben?


    In der Anweisung

    ctx.font = "20px Arial";


    möchte ich gerne die 20 durch eine Variable ersetzen. Wenn Javascript dies erlaubt, wie wird es dann geschrieben?

    ctx.font = " 'variable' px Arial"; geht zum Beispiel nicht.


    LG


    Jochen

    Da ist der Schüler wieder.


    ich will ein Canvas anlegen mit einem Rechteck innerhalb dieses Canvas.

    Das klapp.

    Aber die Koordinaten des ctx.rect stimmen nicht mit den Koordinaten ein, die ich über die Mouse erhalte.


    So lege ich ein ctx.rect(100,100,60,60);

    Die x y Koordinaten lt. Mouse sind :205 276


    Wieso das?


    MfG


    Jochen


    <!DOCTYPE html>

    <html>

    <head>

    <title>Click Position</title>

    <style type="text/css">

    body {

    background-color: #FFF;

    margin: 30px;

    margin-top: 10px;

    }

    #myCanvas {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 600px;

    height: 400px;

    border: 5px red solid;#thing {


    }

    </style>

    </head>

    <body>



    <canvas id="myCanvas" >

    Your browser does not support the HTML5 canvas tag.

    </canvas>


    <body onmousedown="zeigKoord(event)">

    <span id = 'x'></span>x

    <span id = 'y'></span>y

    <script>


    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    ctx.font = "20px Arial";


    ctx.rect(100,100,60,60);

    ctx.stroke();

    ctx.fillText(("zufall"),80,50);




    function zeigKoord(evt)

    {

    xPosition= evt.clientX;

    yPosition= evt.clientY;

    document.getElementById("x").innerHTML=xPosition ;

    document.getElementById("y").innerHTML=yPosition ;

    }


    </script>


    </body>

    </html>

    Das habe ich mir angeschaut und verstanden (?). Es ist - soweit ich es beurteilen kann - nicht prktikabel für meinen Zweck.


    Ich möchte rund 50 Zahlen per random erzeugen. Diese Zahlen sollen dann für die weitere Verwendung als Bilder wie

    Zahl1.jpg

    Zahl2.jpg

    ..

    ..

    zahl50.jpg


    zur Verfügung stehen.

    Diese Zahlen spreche ich in meinem Programm an verschiedenen Stellen an. Ich zeige zum Beispiel Einige ,wieder zufällig, ausgewählt an und der User muss dann Bestimmte davon anklicken. Wie das mit canvas realisiert werden kann ist mir vollkommen schleierhaft.

    Ich müsste aus einem Canvas ein JPG Bild machen.


    Zum Hintergrund: Ich zeige nicht nur Zahlen sopndern auch z.B. Verkehrsschilder, Blumen, Autos usw an.

    ??

    kann ich ein table anlegen gemäß Beispiel?


    B1 B2 B3 B4 B5

    B6 ................. B7

    B8 ...................B9

    B10 B11 B12 B13


    die B1 bis B13 sind Zellen vom table .

    In dem freien Zwischenraum möchte ich eine Progress Bar placieren.

    Geht das? Wenn ja wie bitte?


    MFG


    Jochen

    Funktio9niert beio mir nicht. habe ein bis auf diese Funktionen gekürztes Programm beigefügt.


    Bei "eins" kommen die Bilder in SW

    Bei "zwei" in rot.


    Wenn ich eins und dann zwei und dann wieder eins drücke bleiben die roten Bilder


    <!DOCTYPE html>

    <html>

    <head>

    <h1>Konzentration und Schnelligkeit Übung 1</h1>

    <title>Gehirn Aufgabe5</title>

    <style>




    #button1 {

    background-color: #00AFFF;

    border: 5 solid blue;

    color: white;

    padding: 2px 2px;

    text-align: center;

    font-size: 18px;


    }

    table{

    margin-top:30px;

    border: 0px solid white;

    clear:left;

    }


    //td{font-size:40px; padding:4px 10px;


    }

    td {width: 75px;

    height: 75px;

    border:0px solid red;



    }



    </style>

    <script>




    var images = {};

    images.img1 = new Image();

    images.img2 = new Image();

    images.img3 = new Image();

    images.img4 = new Image();

    images.img5 = new Image();


    images.img11 = new Image();

    images.img12 = new Image();

    images.img13 = new Image();

    images.img14 = new Image();

    images.img15 = new Image();


    images.img1.src = "Terrorist1.jpg";

    images.img2.src = "Terrorist2.jpg";

    images.img3.src = "Terrorist3.jpg";

    images.img4.src = "Freund1.jpg";

    images.img5.src = "freund2.jpg";



    images.img11.src = "ToterTerrorist1.jpg";

    images.img12.src = "ToterTerrorist2.jpg";

    images.img13.src = "ToterTerrorist3.jpg";

    images.img14.src = "ToterFreund1.jpg";

    images.img15.src = "ToterFreund2.jpg";




    function Zwei()

    {

    for (var i = 0; i <= 4; i++)

    {

    document.querySelector('#bl' +[i] + ' img').src = images['img' + (i+11)].src;

    }

    }



    function Eins()

    {


    for (var i = 0; i <= 4; i++)

    {


    document.getElementById('bl' +[i]).appendChild(images['img' + (i+1)]);


    }


    }






    </script>

    </head>

    <body>


    <table>


    <tr>


    <td id = "bl0" onclick="hitColor('bl0')"></td>

    <td id = "bl1" onclick="hitColor('bl1')"></td>

    <td id = "bl2" onclick="hitColor('bl2')"></td>

    <td id = "bl3" onclick="hitColor('bl3')"></td>

    <td id = "bl4" onclick="hitColor('bl4')"></td>

    </tr>

    <tr>

    <td id = "bl5" onclick="hitColor('bl5')"></td>

    <td id = "bl6" onclick="hitColor('bl6')"></td>

    <td id = "bl7" onclick="hitColor('bl7')"></td>

    <td id = "bl8" onclick="hitColor('bl8')"></td>

    <td id = "bl9" onclick="hitColor('bl9')"></td>


    </tr>

    <tr>

    <td id = "bl10" onclick="hitColor('bl10')"></td>

    <td id = "bl11" onclick="hitColor('bl11')"></td>

    <td id = "bl12" onclick="hitColor('bl12')"></td>

    <td id = "bl13" onclick="hitColor('bl13')"></td>

    <td id = "bl14" onclick="hitColor('bl14')"></td>

    </tr>


    <tr>

    <td id = "bl15" onclick="hitColor('bl15')"></td>

    <td id = "bl16" onclick="hitColor('bl16')"></td>

    <td id = "bl17" onclick="hitColor('bl17')"></td>

    <td id = "bl18" onclick="hitColor('bl18')"></td>

    <td id = "bl19" onclick="hitColor('bl19')"></td>

    </tr>

    <tr>

    <td id = "bl20" onclick="hitColor('bl20')"></td>

    <td id = "bl21" onclick="hitColor('bl21')"></td>

    <td id = "bl22" onclick="hitColor('bl22')"></td>

    <td id = "bl23" onclick="hitColor('bl23')"></td>

    <td id = "bl24" onclick="hitColor('bl24')"></td>

    </tr>

    </table>





    <input type="button" id="button1" value="eins" onclick="Eins()"></button>

    <input type="button" id="button2" value="zwei" onclick="Zwei()"></button>


    </body>

    </html>