JsキャンバスのfillRect（）座標が変数として機能しない

Question

私はこのようなキャンバスの四角形を持っています：draw.fillRect(sq); 、それ以前にはsq = "400, 400, 0, 0";です。コンソールには、

"CanvasRenderingContext2D.fillRectの引数が不十分です"と表示されます。

sqを1つの引数として扱うためです。これを避ける方法はありますか？ 1つの変数に4つの引数をすべて格納するには？

ありがとうございます。

Answer 1

あなたは正しいです、あなたのsqは単一の文字列であり、そのために単一の変数として扱われます。代わりのような配列を使用するようにしてください：

var sq = [400, 400, 0, 0]; 

そして

draw.fillRect.apply(draw, sq); 

applyはsqに渡された引数を使用して関数を呼び出します。さらに については、MDNのDocumentation for Function.prototype.applyをご覧ください。

---

注：あなたがwidth = heigth = 0でx = y = 400で四角形を描画しようとしています。だからあなたは長方形のサイズが0であることをとても気にしません。あなたはあなたのパラメータを変更したいかもしれません。 documentation of the .fillRect()メソッドを見てください。

Answer 2

あなたの前提は正しく、「fillRect」には4つの引数が必要です。

ここに1つの変数に保存する方法についての提案：ところで

draw.fillRect(rectData.x,rectData.y, rectData.width, rectData.height); 

：

Var rectData = { 
"x": 400, 
"y": 400, 
"width": 0, 
"height": 0 
}; 

そして、それはそのように使うよりも0の幅/高さを使用して、おそらくされあなたが望むものではありません。どの矩形も表示されません:)まず、コードスニペットをテストします。 Mozilla Developer Networkにあります。

'apply'ソリューションと比較すると、オブジェクトリテラルを使用するとコードが読みやすくなり、デバッグが簡単になります。