Question

我正在尝试制作一张贺卡发电机。应该发生的是，当用户点击“制作卡片”按钮时，“贺卡”图形将出现在屏幕上，但到目前为止，没有任何反应。此外，我希望它能让div1和div2在单击按钮时消失，这样只有贺卡图形才会保留在屏幕上。我该怎么办？非常感谢您的帮助。

<html>
<head>
    <title>Greeting Card Generator</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
      function draw() {                           
            var c=document.getElementById("myfillDrawing");
            var ctx=c.getContext("2d");
            ctx.strokeStyle= "#FF0000";
            ctx.lineWidth = 10;
            ctx.strokeRect(125, 25, 150, 50);
            ctx.fillStyle = "blue";
            ctx.font = "22px Arial";
            ctx.fillText("Greeting Card", 135, 55);
    </script>
    <style>
        #div1{
            background-color: cyan;
            font-family: "Arial Black", Gadget, sans-serif;
            font-size: 24px;
            text-align: center;
            border: 25px solid red;
            padding: 25px;
            width: 50%;
            margin: 0 auto;
        }
        #div2{
            background-color: cyan;
            font-family: "Arial Black", Gadget, sans-serif;
            font-size: 24px;
            text-align: center;
            border: 25px solid orange;
            padding: 25px;
            width: 50%;
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="div1">Greeting Card Generator</div>
    <div id="div2"> Content Goes Here 
        <br>
        <input type="button" value="make card" id="draw" onclick="draw();">  
    </div>    
    <canvas id="card" width="400" height="100"></canvas>
</body>

Answer 1

需要进行以下更改。 1.功能的近括号（{） 2.将div1和div2的样式显示为none 3.将canvas的id更改为myfillDrawing

<html><head>
<title>Greeting Card Generator</title>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript">function draw() {                           
        var c=document.getElementById("myfillDrawing");
        var ctx=c.getContext("2d");
        ctx.strokeStyle= "#FF0000";
        ctx.lineWidth = 10;
        ctx.strokeRect(125, 25, 150, 50);
        ctx.fillStyle = "blue";
        ctx.font = "22px Arial";
        ctx.fillText("Greeting Card", 135, 55);
        document.getElementById("div1").style.display="none";
        document.getElementById("div2").style.display="none";
        }
</script>
<style>
    #div1{
        background-color: cyan;
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 24px;
        text-align: center;
        border: 25px solid red;
        padding: 25px;
        width: 50%;
        margin: 0 auto;
    }
    #div2{
        background-color: cyan;
        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 24px;
        text-align: center;
        border: 25px solid orange;
        padding: 25px;
        width: 50%;
        height: 300px;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div id="div1">Greeting Card Generator</div>
<div id="div2"> Content Goes Here 
    <br>
    <input type="button" value="make card" id="draw" onclick="draw();">  
</div>    
<canvas id="myfillDrawing" width="400" height="100"></canvas>
</body>

制作onclick按钮可创建绘图

1 个答案: