image coming afterwards
I am making a page and using canvas.. So in the body part i am doing something like this:
<body>
<canvas id="myCanvas" width="1300" height="1150">
</canvas>
<img src="arbit.png" width ="1000" height="1000" />
</body>
But the image is loading after the canvas space and the drawing on canvas is appearing above the image.
开发者_如何学PythonCan anybody tell me whats the problem?
EDIT:
Sorry mistake framing the question..
I want to overlap canvas and image ....
Got it.
You need to use some CSS positioning to get the two elements to overlap.
Check out this JsBin I just knocked up to see it in action
Markup:
<body>
<div class="wrapper">
<canvas id="myCanvas" width="250" height="250"></canvas>
<img src="http://dummyimage.com/50x50/000/fff" alt="test" width ="50" height="50" />
</div>
</body>
Css:
.wrapper {
position:relative;
}
.wrapper canvas {
border:1px solid red;
position:absolute;
z-index:1;
}
.wrapper img {
position:absolute;
top:0px;
left:20px;
z-index;2;
}
the <img> element is after the <canvas> element, that's why the image is being displayed after (below) canvas.
Did you try:
<body>
<canvas id="myCanvas" width="1300" height="1150">
<img src="arbit.png" width ="1000" height="1000" />
</canvas>
</body>
加载中,请稍侯......
精彩评论