Question

我试图在＆＃34;背景＆＃34;中保留一些html。这是不可见的，并绘制canvas image以覆盖整个页面，但相反的情况发生，屏幕变白，只显示html表格。 myImage无法显示。

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

代码有点草率，因为剪切出来给你的想法，但它完全有效，直到我添加涵盖document.write()的{{1}}。

如何使用canvas重叠canvas？

Answer 1

问题myImage未定义

js。

<canvas>元素未设置width或height设置为html

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

导致将c.width，c.height设置为默认canvas width，height位于

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

您可以将<canvas> width设为window.innerWidth，将height设为window.innerHeight

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

之前打电话

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

正如@Rayon指出的那样，使用document.write()也可能导致问题。尝试用.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 https://jsfiddle.net/hu39u2ow/1

Answer 2

初始化时的canvas对象是完全透明的（准确地说是透明的黑色），因此它是透明的。

如果你想用它来隐藏它背后的元素，你需要设置一个颜色：

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

如何在HTML表单/标签上绘制Canvas？

2 个答案: