0

キャンバスに絵を描く方法を教えてください。html 5 コードは次のとおりです。

 var TableHeight = 300,
     TableWidth = 500,    
 function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    table.draw();
}

table = {
    color: '#000',
    PositionX : 1,
    PositionY: 1,
    width: TableWidth,
    height: TableHeight,
    draw: function(){
        context.fillStyle = this.color;
        context.fillRect = (this.PositionX, this.PositionY, this.width, this.height);
        context.clearRect(5, 5, TableWidth - 10, TableHeight - 10);
    }
}

これが私のhtmlコードです

<body>
    <canvas id ='canvas' width = 500px height = 300px ></canvas>
    <script>init()</script>
</body>

私の英語でごめんなさい。

4

2 に答える 2

2

コードには複数の問題があります。

まず、私が見る限り、あなたの関数宣言は間違っています。最後のグローバル変数の後に定義されるのではなく、セミコロンの代わりにコンマを入力します。以下は、変数を介して関数を実行していないため、関数を正しく定義する方法です。

var TableHeight = 300,
    TableWidth = 500;

function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    table.draw();
}

最後に、.fillStyleはプロパティであり、メソッドではありませんが、同じことは当てはまりません.fillRect()。これは実際にはメソッドであり、そのように実行する必要があります。

var table = {
    color: '#000',
    PositionX: 1,
    PositionY: 1,
    width: TableWidth,
    height: TableHeight,
    draw: function() {
        context.fillStyle = this.color;
        context.fillRect(this.PositionX, this.PositionY, this.width, this.height);
        context.clearRect(5, 5, TableWidth - 10, TableHeight - 10);
    }
}

デモ

于 2012-10-05T21:18:58.053 に答える
0

ここでの問題はfillRect、fillStyleなどがプロパティではなくメソッドであることです。次のように呼び出す必要があります。

context.fillStyle(this.color);

詳細とサンプルについては、 MDNのドキュメントを参照してください

Douglas Crockford のWeb サイトも参照して、適切な Javascript スタイルに関する指針を確認してください。たとえばvar、特定の場所でキーワードを省略しているため、意図せずに変数がグローバルになります。

于 2012-10-05T21:14:30.780 に答える