3

Canvas オブジェクトでの描画の実験を開始しました。これまで、Canvas への露出は画像操作に集中していた (NPI) ため、その座標系と変換プロセスにはある程度精通しています。画面サイズが 30 X 30 のテスト キャンバスを使用しています。2D コンテキストへのハンドルを取得した後、1 つの呼び出しを発行します。

ctx.fillRect(0,0,10,10);

左上隅にピンの頭ほどの大きさの小さな黒い斑点ができます。長方形を任意のサイズ (キャンバスの約 1/4 など) にするには、次の調整が必要です。

ctx.fillRect(0,0,200,200);

では、このキャンバスの縮尺はどのように歪んでいるのでしょうか? はい、通常に似たものに「デスケール」できると思いますが、そもそも何が原因なのかを突き止めたいと思います。何らかの形で干渉している可能性があると考えてJqueryを無効にしましたが、それは役に立ちませんでした。

何か案は？

更新：

キャンバスは、次の行に沿って dom に追加されます。

<canvas id='foo_" + self.groupIndex + "' class='hCanvasClassName'>"

これにより、CSS は幅を 100% で定義し、高さは JS コードによって割り当てられます。

4

1 に答える 1

6

このコードは表示されませんでしたが、要素に直接ではなく、CSS を使用してキャンバスのサイズを適用したように聞こえます。これにより、縮小される理由が説明されます。

これを行う必要があります：

<canvas width="30" height="30" id="myCanvas"></canvas>

これを行った場合：

<canvas style="width:30px;height;30px;" id="myCanvas"></canvas>

何が起こるかというと、キャンバス要素がデフォルトのサイズ (300x150、ここを参照: http://jsfiddle.net/AbdiasSoftware/CfM ​​Nf/ ) を使用し、それを css によって 30x30 に縮小します。これは、現在キャンバスに描画されているすべてのものを意味しますそれに応じてスケーリングされます。

于 2013-06-11T00:24:53.310 に答える