26

画像があり、その上にキャンバスを重ねて、画像自体を変更せずに画像上に描画できるようにしました。 

<div class="needPic" id="container">
    <img id="image" src=""/>
    <!-- Must specify canvas size in html -->
    <canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas>
</div>

上記のキャンバス ラインで幅と高さをピクセル単位で指定でき、うまく機能しますが、画面サイズに基づいて動的にサイズ変更する必要があります (小さなスマートフォンとタブレットで動作する必要があります)。上記のようにパーセンテージを入力しようとすると、ピクセルとして解釈されます。したがって、キャンバスは幅 70 ピクセル、高さ 60 ピクセルになります。

何らかの理由で、CSS でキャンバスのサイズを変更できないため、html で行う必要があるようです。明確にするために、CSS でキャンバスのサイズを指定しようとしても、実際にはキャンバスのサイズは変更されません。画像が何らかの形で干渉しているように見えます。

どんな助けでも大歓迎です。

更新： そうすると<canvas id="sketchpad" style="width:70%;height:60%;"></canvas>、デフォルトで高さ150px、幅300px（デバイスに関係なく）になり、divに合わせてキャンバスが引き伸ばされます。css で div を幅 60%、高さ 60% に設定したため、キャンバスはそれを埋めるように伸びます。canvas.widthとcanvas.style.widthをログに記録することでこれを確認しました-canvas.widthは300pxで、canvas.sytle.widthは「60％」でした（親divから）。これにより、非常に奇妙なピクセル化と描画効果が発生します...

4

5 に答える 5

6

キャンバスの高さをウィンドウの innerHeight に、幅をウィンドウの innerWidth に設定します。

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

特定のパーセンテージが必要な場合は、それらにパーセンテージを掛けます。例：

//25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages
于 2016-07-22T16:38:06.197 に答える
0

JavaScript を使用して、イメージの幅 (ピクセル単位) に合わせてキャンバスのサイズを変更できます。キャンバスを使用しているので、おそらく既に JavaScript を使用しているので、これは問題になりません。

Resize HTML5 canvas to fit window を参照してください。同一ではありませんが、同様のソリューションが機能するはずです。

于 2013-09-08T02:04:46.270 に答える