javascript - 通过 JavaScript 插入 HTML

我试图仅使用 JavaScript 将“免费绘图框”插入到我的网页中。我已经能够让我的“免费绘制框脚本”在存在 HTML 的页面上工作，但我想通过 JavaScript 插入 HTML 来完成此操作。我已经包括了我的整个代码的一个片段，但是，我相信有问题的代码靠近底部 - 注释为“插入 HTML”。我的错误在哪里？

<html>

    <script type="text/javascript">

    /*Free Draw Box Script*/
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;
    
    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
    
        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }
    
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }
    
    function erase() {
        var m = confirm("Are you sure you want to clear the Signature?");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }
    
    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }
    
    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
    
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }

    /*Insert HTML*/
    document.body.innerHTML += '
        <body onload="init()">
            <canvas id="can" width="800" height="200" 
            style="position:absolute;top:10%;left:10%;border:1px solid;">
            </canvas>

            <img id="canvasimg" style="position:absolute;top:10%;
            left:52%;" style="display:none;">
            <input type="button" value="clear" id="clr" size="23" 
            onclick="erase()" style="position:absolute;top:55%;
            left:15%;">
        </body>
    ';

    </script>

    <body>
        <p></p>
    </body>

    </html>

最佳答案

我不建议使用 JS 输入 html，但这里是解决方法:

使用template literals对于 html 字符串。
还可以使用 outerHTML 将字符串中的 body 元素放入。

请看下面的演示:

var canvas,ctx,flag=!1,prevX=0,currX=0,prevY=0,currY=0,dot_flag=!1;var x="black",y=2;function init(){canvas=document.getElementById('can');ctx=canvas.getContext("2d");w=canvas.width;h=canvas.height;canvas.addEventListener("mousemove",function(e){findxy('move',e)},!1);canvas.addEventListener("mousedown",function(e){findxy('down',e)},!1);canvas.addEventListener("mouseup",function(e){findxy('up',e)},!1);canvas.addEventListener("mouseout",function(e){findxy('out',e)},!1)}
function draw(){ctx.beginPath();ctx.moveTo(prevX,prevY);ctx.lineTo(currX,currY);ctx.strokeStyle=x;ctx.lineWidth=y;ctx.stroke();ctx.closePath()}
function erase(){var m=confirm("Are you sure you want to clear the Signature?");if(m){ctx.clearRect(0,0,w,h);document.getElementById("canvasimg").style.display="none"}}
function save(){document.getElementById("canvasimg").style.border="2px solid";var dataURL=canvas.toDataURL();document.getElementById("canvasimg").src=dataURL;document.getElementById("canvasimg").style.display="inline"}
function findxy(res,e){if(res=='down'){prevX=currX;prevY=currY;currX=e.clientX-canvas.offsetLeft;currY=e.clientY-canvas.offsetTop;flag=!0;dot_flag=!0;if(dot_flag){ctx.beginPath();ctx.fillStyle=x;ctx.fillRect(currX,currY,2,2);ctx.closePath();dot_flag=!1}}
if(res=='up'||res=="out"){flag=!1}
if(res=='move'){if(flag){prevX=currX;prevY=currY;currX=e.clientX-canvas.offsetLeft;currY=e.clientY-canvas.offsetTop;draw()}}}

/*Insert HTML*/
document.body.outerHTML += `<body onload="init()">
            <canvas id="can" width="800" height="200" 
  style="position:absolute;top:10%;left:10%;border:1px solid;">
            </canvas>
            <img id="canvasimg" style="position:absolute;top:10%;
            left:52%;" style="display:none;">
            <input type="button" value="clear" id="clr" size="23" 
            onclick="erase()" style="position:absolute;top:55%;
            left:15%;">
        </body>`;

关于javascript - 通过 JavaScript 插入 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45638523/

javascript - 通过 JavaScript 插入 HTML

上一篇：jquery - 导航顶部的对象，但导航应该在对象顶部

下一篇：javascript - 无需硬编码即可使两个图像具有相同的高度？