Question

我在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>

Answer 1

所以我想通了。感谢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);

Answer 2

画布的默认填充样式为黑色，而画布本身以透明方式开始。在调用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);

FIDDLE

无法在localhost上查看html5 canvas内容

2 个答案: