Question

我一直在尝试用html在基本画布上绘制，但我似乎做不到。我看过很多教程，所有这些教程似乎都没有帮助我在画布上绘画。我也上网查找并寻找答案。在此过程中，我编写了一些脚本，其中一些教程已合并在一起。

function draw(){
    var canvas = document.getElementById("mindmap");
    var myCanvas = canvas.getContext("2d");

    myCanvas.fillStyle = 'black';
    myCanvas.fillRect(20, 20, 20, 20);
}

我要实现的目的是使整个画布变黑，但对我而言不起作用。

完整的代码在这里：

    <html>
        <head><meta http-equiv="Content-Type" content="text/html; 
    charset=windows-1252">
            <title>Title</title>
            <style type="text/css">
                #header{
                    background-color:rgb(200, 150, 150);
                    font-family: monospace;
                    margin: 0px 0px 10px 0px;
                }
                canvas{
                    border: 1px solid black;
                }
            </style>
            <script>
            function draw(){
                var c = document.getElementById("mindmap");
                var ctx = c.getContext("2d");
                ctx.fillStyle = 'black';
                ctx.fillRect(20, 20, 20, 20);
            }
            </script>
        </head>
        <body>
            <h1 id="header">Title</h1>
            <canvas id="mindmap" width="400" height="400"></canvas>
            <p>My canvas work</p>
        </body>
    </html>

Answer 1

该代码看起来不错，应该可以绘制。

唯一让您绊倒的是画布的ID ...
确保mindmap是画布ID。

var canvas = document.getElementById("mindmap");
var myCanvas = canvas.getContext("2d");

myCanvas.fillStyle = 'black';
myCanvas.fillRect(20, 20, 20, 20);
myCanvas.fillRect(40, 40, 20, 20);
myCanvas.fillRect(65, 65, 20, 20);

<canvas id="mindmap"></canvas>

我无法在画布上绘画

1 个答案: