1

HTMLファイルに次のコードがあり、ローカルホスト[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 に答える