html5 canvas能添两个图吗

指定两个canvas的postion:absolution,然后设置者两个canvas的left与top属性，需要注意的是建议把小的canvas放到上面，方法是设置两个canvas的z-index为不同的值，值大的在上面。 绘图的过程可以参考一下代码： var mycanvas=document.getElement.

<img src="......." id="img1" />

<img src="......." id="img2" />

<img id="img3" /> var img1 = document.getElementById("img1"),

    img2 = document.getElementById("img2"),

    img3 = document.getElementById("img3")

var canvas = document.createElement("canvas"),

    context = canvas.getContext("2d")

canvas.width = img1.naturalWidth + img2.naturalWidth

canvas.height = Math.max(img1.naturalHeight,img2.naturalHeight)

// 将 img1 加入画布

context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight)

// 将 img2 加入画布

context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight)

// 将画布内容导出

var src = canvas.toDataURL()

img3.src = src <p>drawImage 的使用方法可以去这里看一下</p>

<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage" />

上两位给出的是，内容置于网页任何一个位置。您提到的背景图于任何位置的代码如下 ：

<style type="text/css">

<!--

body {background:url(图片路径) no-repeat 10px 10px}

</style>

后面两个10PX，就是位置的指定了，一个是左右，一个是上下，您改下试试。

上面的body也可替换为您指定的哪个元素。如您的元素是

<div class="imgbg">玖赞网络是有背景的</div>

那么相就的BODY则替换为 .imgbg

---