Javascript 如何在HTML表单/标记上绘制画布？_Javascript_Html_Forms_Canvas

Javascript 如何在HTML表单/标记上绘制画布？

javascript html forms canvas

Javascript 如何在HTML表单/标记上绘制画布？,javascript,html,forms,canvas,Javascript,Html,Forms,Canvas,我试图在“背景”中保留一些不可见的html，并绘制一个canvas图像来覆盖整个页面，但情况正好相反，屏幕变白，只显示html表单我的图像不显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplica

我试图在“背景”中保留一些不可见的

html

，并绘制一个

canvas图像来覆盖整个页面，但情况正好相反，屏幕变白，只显示html
表单<代码>我的图像

不显示

<!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>


myApp
您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
c、 宽度=window.screen.width；
c、 高度=窗口、屏幕、高度；
var myImage=新图像（）；
myImage.src='/myImage.jpg'；
ctx.drawImage（myImage，0，0，c.宽度，c.高度）；
//这一部分似乎“覆盖”了我在画布上所做的任何事情
document.write(
''+
''+
''+
''+
''+
''+
''+
''
);

代码有点邋遢，因为它是为了给你一个想法而裁剪出来的，但是在我添加document.write（）之前，它工作得非常好，它覆盖了

画布
如何使用canvas
重叠html标记
？
myImage
未在js
中定义
元素在html

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

您可以将宽度设置为窗口。内部宽度设置为，高度设置为窗口。内部高度设置为
c.width = window.innerWidth;
c.height = window.innerHeight;

打电话之前
ctx.drawImage(myImage, 0, 0, c.width, c.height);


正如@Rayon指出的，使用document.write（）
也可能导致问题。尝试用文档.write（）替换.insertAdjacentHTML（）


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
c、 宽度=window.screen.width；
c、 高度=窗口、屏幕、高度；
var myImage=新图像（）；
myImage.onload=函数（）{
ctx.drawImage（myImage，0，0，c.宽度，c.高度）；
document.body.insertAdjacentHTML（“beforeend”，
''+
''+
''+
''+
''+
''+
''+
''
);
}
myImage.src=http://lorempixel.com/300/300/';

jsiddle
初始化时，画布上的对象是完全透明的（准确地说是透明的黑色），因此是透明的
如果要使用它隐藏其后面的元素，则需要设置颜色：
ctx.fillStyle = "#FFF"; // pure opaque white
ctx.fill(0, 0, canvas.width, canvas.height);

此外，在画布上绘制图像时，您需要确保实际加载了图像。设置src
并立即绘制它将不起作用（当您设置图像对象的src
时，将启动异步加载）
你需要像这样的东西：
myImage.onload = function() {
    ctx.drawImage(myImage, 0, 0);
};
myImage.src = "/myImage.jpg";

最后，document.write
真的不是一个好办法，你应该在后面添加画布：
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";

@人造丝myImage
也没有定义谢谢你的回复，因为我提到我发布的代码是我正在开发的应用程序中有点马虎的片段（我不想透露太多信息）。我已经定义了画布的尺寸，不过我也会在提供的codeDefined myImage中对其进行更新，以供您欣赏：）.insertAdjacentHTML（）
works！虽然提交人清理了画布并打开了一个新页面，但使用
标记解决了这个问题！它工作得很漂亮：’）谢谢@tery.blargh见更新帖子。更正了拼写错误的.inssertAdjacentHTML
，将“beforeed”
替换为“afterend”
我添加了ctx.save（）；ctx.fillStyle=“#FFF”//纯不透明白色ctx填充物（0，0，c.宽度，c.高度）；ctx.restore（）；这没什么区别。而且，在我把document.write（）放在画布上之前，我确实提到过这幅画的效果非常好；这似乎导致画布元素被完全忽略。这是一个非常有用的函数，我将使用它！非常感谢。但这根本没有改变任何事情。同样，在调用document.write（）函数之前，图像绘制得非常完美
myImage.onload = function() {
    ctx.drawImage(myImage, 0, 0);
};
myImage.src = "/myImage.jpg";

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";