1

我在 html 文件中有以下代码，当我尝试在 localhost [MAMP] 上查看代码时，我看到的只是一个黑色画布区域，周围有一个边框。我已经在 chrome 和 firefox 中检查过它。相同的结果。我究竟做错了什么？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>      
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000;"></canvas>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
        $(function() {
            var myCanvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            ctx.fillRect(50, 50, 100, 100);
        //close jquery  
        });         
    </script>
</body>

4

2 回答 2

4

所以我想通了。感谢 Ken 和 Scott 的帮助。

var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);

本来应该

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d"); //should have been myCanvas not canvas
ctx.fillRect(50, 50, 100, 100);
于 2013-09-26T04:03:35.303 回答
3

画布的默认填充样式是黑色，而画布本身一开始是透明的。在调用 fillRect 之前将其设置为其他值，您会看到更好的结果。

ctx.fillStyle = "#F00"

或者，试试这个来查看多个矩形：

var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

小提琴

于 2013-09-26T03:50:45.077 回答