Wie zeichne Canvas über HTML-Formulare/Tags?

Ich versuche, einige html im "Hintergrund" zu halten, die nicht sichtbar ist, und zeichne canvas image, um die ganze Seite abzudecken, aber das Gegenteil passiert, der Bildschirm wird weiß und zeigt nur html Formulare. myImage wird nicht angezeigt.Wie zeichne Canvas über HTML-Formulare/Tags?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <title>myApp</title> 
</head> 
<body> 
    <canvas id = "canvas"> 
     Your browser does not support the HTML5 canvas tag. 
    </canvas> 


    <script type"text/javascript"> 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 

    c.width = window.screen.width; 
    c.height = window.screen.height; 

    var myImage = new Image(); 
    myImage.src ='/myImage.jpg'; 

    ctx.drawImage(myImage, 0, 0, c.width, c.height); 

    //This part seems to "overwrite" anything else I do on canvas 
    document.write(

      '<div style=\"position:relative;width:800px;height:800px\">'+ 
      '<canvas width=\"800\" height=\"800\"></canvas>'+ 
      '<form id ="divForm" name=\"myForm\" action=\"http://www.example.com/form.php\" method=\"POST\" target=\"_blank\">'+ 
      '<input type=\"text\" name = "id" value=\"'   + String(id)   + '\">'+ 
      '<input type=\"text\" name = "username" value=\"' + String(username) + '\">'+ 
      '<input type=\"text\" name = "password" value=\"'  + String(password)   + '\">'+ 
      '</form>'+ 
      '</div>' 

     ); 
    </script> 
</body>

-Code ist eine Art von schlampig durch Stücke Ausschneiden Sie auf die Idee zu geben, aber es funktioniert perfekt, bis ich den document.write() hinzufügen, die die canvas abdeckt. Wie kann ich canvas verwenden, um die html tags zu überlappen?

Quelle

2016-05-27 tery.blargh

myImage ist bei js bei Frage nicht definiert.

<canvas> Element hat nicht width oder height Satz bei html

<canvas id = "canvas"> 
    Your browser does not support the HTML5 canvas tag. 
</canvas>

in resultierenden c.width Einstellung c.heightcanvaswidth, height bei

ctx.drawImage(myImage, 0, 0, c.width, c.height);

Sie setzen <canvas> auf Standard können width-window.innerWidth, height zu window.innerHeight

c.width = window.innerWidth; 
c.height = window.innerHeight;

vor

ctx.drawImage(myImage, 0, 0, c.width, c.height);

Wie @Rayon darauf hingewiesen Aufruf, mit document.write() auch verursacht Problem werden könnte. Versuchen für .insertAdjacentHTML()document.write()

<canvas id = "canvas"> 
    Your browser does not support the HTML5 canvas tag. 
</canvas> 


<script type"text/javascript"> 
var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 

c.width = window.screen.width; 
c.height = window.screen.height; 

var myImage = new Image(); 
myImage.onload = function() { 
    ctx.drawImage(myImage, 0, 0, c.width, c.height); 

document.body.insertAdjacentHTML("beforeend", 

     '<div style=\"position:relative;width:800px;height:800px\">'+ 
     '<canvas width=\"800\" height=\"800\"></canvas>'+ 
     '<form id ="divForm" name=\"myForm\" action=\"http://www.example.com/form.php\" method=\"POST\" target=\"_blank\">'+ 
     '<input type=\"text\" name = "id" value=\"'   + String(id)   + '\">'+ 
     '<input type=\"text\" name = "username" value=\"' + String(username) + '\">'+ 
     '<input type=\"text\" name = "password" value=\"'  + String(password)   + '\">'+ 
     '</form>'+ 
     '</div>' 

    ); 
} 
myImage.src ='http://lorempixel.com/300/300/';

jsfiddle Substituieren https://jsfiddle.net/hu39u2ow/1

Quelle

2016-05-27 06:02:06 guest271314

'document.write' ist das Problem ... – Rayon

@Rayon 'myImage' ist auch nicht definiert – guest271314

Vielen Dank für Ihre Antwort, wie ich den Code, den ich postete, ist ein bisschen schlampig Schnipsel meiner Anwendung, die ich entwickeln (Ich will nicht zu geben viele Informationen weg). Ich habe die Abmessungen der Leinwand definiert, obwohl ich es in meinem bereitgestellten Code aktualisieren werde –

A canvas Objekt initialisiert, wenn vollständig transparent ist (transparent schwarz genau zu sein), so ist es see-through.

Wenn Sie wollen, es zu benutzen Elemente dahinter verstecken müssen Sie eine Farbe festlegen:

ctx.fillStyle = "#FFF"; // pure opaque white 
ctx.fill(0, 0, canvas.width, canvas.height);

Darüber hinaus, wenn sie auf einer Leinwand ein Bild zeichnen Sie müssen sicher sein, dass das Bild tatsächlich geladen. Die Einstellung src und das sofortige Zeichnen funktioniert nicht (wenn Sie src eines Bildobjekts setzen, wird eine asynchrone Last gestartet).

Sie brauchen so etwas wie:

myImage.onload = function() { 
    ctx.drawImage(myImage, 0, 0); 
}; 
myImage.src = "/myImage.jpg";

Schließlich document.write ist wirklich nicht der Weg zu gehen, sollten Sie stattdessen nur die Leinwand mit auf später hinzufügen:

var canv = document.createElement("canvas"); 
canv.style.position = "absolute"; 
canv.style.left = "0px"; 
canv.style.top = "0px"; 
canv.style.width = "100vw"; 
canv.style.height = "100vh";

Quelle

2016-05-27 06:13:27 6502

Ich fügte ctx.save(); \t \t ctx.fillStyle = "#FFF"; // reines Deckweiß \t \t ctx.fill (0, 0, c.width, c.height); \t \t ctx.restore(); Es machte keinen Unterschied. Außerdem habe ich erwähnt, dass die Zeichnung auf der Leinwand einwandfrei funktioniert, bis ich document.write() gesetzt habe; was dazu führt, dass das canvas-Element vollständig ignoriert wird. –

Das ist eine sehr nützliche Funktion, ich werde es benutzen! Vielen Dank. Aber es hat überhaupt nichts verändert. Auch hier wird das Bild perfekt gezeichnet, bis die Funktion 'document.write()' aufgerufen wird –

Wie zeichne Canvas über HTML-Formulare/Tags?

Antwort

Verwandte Themen