0

これが今日の私の問題です、私は< img >に何かを描いてみますこれは構造です

<div id='...' style='position:relative;'>
  <img id='...' style='posistion:absolute;' />
  <canvas id ='...' style='position:absolute;' />
</div>

cssのimgはすでに

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;

画像にキャンバスを描くにはどうすればよいですか？今のところそれは遅れています。キャンバスでz-indexを使用できません。他のdivを作ってみました。imgである必要があります。キャンバスの代わりに何か他のものを使用する必要がありますか？他のdivを使用することもできますが、描画したいパスは実際には単純ではなく、画像が大きい/小さい場合でもサイズを変更できる必要があります。アドバイスをありがとう、みんなが私の英語を理解してくれることを願っています。

ここで必要なのは、canvasが遅れているときのコードです。キャンバスを追加しないで接頭辞を付けると、画像が消えます。これがすでに削除されていることをユーザーに示すパスを配置したいのですが、この画面には他の多くのdivが表示されることがあるので、IMGまたはimgが含まれるDIVにキャンバスを配置したいと思います。 imgは大きいので、下にパスは表示されません。ここにリンクがあり ますhttps://dl.dropbox.com/u/6421191/canvasbehind.jpg

4

3 に答える 3

1

キャンバスに画像を描くだけです：

<html>
<canvas id ='your_canvas'  width="1000" height="1000"/>
</html>

<script>
window.onload=function(){
var canvas = document.getElementById('your_canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = (your image source);
ctx.drawImage(img, x_pos,y_pos,width,height);
}
</script>
于 2012-12-17T08:08:09.060 に答える
0

HTML

<div id='mydiv' >
  <img id='myimage' src="http://placekitten.com/200/385" />
  <canvas id ='mycanvas'  width="200" height="100" />
</div>

CSS

div#mydiv{
    position: relative;
}
#myimage{
     position: relative;
}
#mycanvas{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #333;
}

これがあなたがやろうとしていることだと思います。

背景に 1 つの画像を配置し、画像の上にキャンバス領域を表示しますか?

私の小さなサンプル コードがお役に立てば幸いです。

于 2012-12-17T08:08:33.053 に答える
0

HTML の img の前にキャンバスを配置します。

<div id='...' style='position:relative;'>
<canvas id ='...' style='position:absolute;' />
<img id='...' style='posistion:absolute;' />
</div>
于 2012-12-17T08:11:53.303 に答える