关于canvas的问题？

Question

现在的背景图是通过这个形式写的

但是使用

      var imgData = document.getElementById('hwImgCanvas').toDataURL('image/png')

这能得到canvas的标记，得不到背景图

Answer 1

• 标签元素的样式通过style来修改
  canvas元素如果你使用style属性来控制它的显示样式，它和一个空白的div几乎是无差别的
• canvas元素具备一些额外的能力，这也是这个元素存在的意义；
  它能够提供一个渲染上下文对象（CanvasRenderingContext2D），这个对象通过getContext方法获得，这个对象提供了与绘制能力相关的api。
• toDataURL方法的作用
  canvas的toDataURL方法实际上是将canvas这个标签元素对应的渲染上下文上的绘制的像素数据信息提取导出成一个dataUrl形式的数据格式。
• 打个比方
  你可以这样想，canvas元素是一个透明的绘本，你用style.backgroundImage的方法添加背景图就相当于给绘本的皮页贴了一张图，而canvas.toDataURL方法并不会关心你皮页有什么内容，它导出的是你这个绘本里内页的绘制数据，你通过CanvasRenderingContext2D.drawImage API画上去的图就相当于你给绘本里面其中一个内页贴了一个图片（内页可以有多个，如果每个内页大小都一样，那么你可能就只能看到其中的一个，其余的都被遮挡，当然也可以通过api让其不遮挡形式显示，这不在这里讨论），这时候这个数据就是可以通过toDataURL方法导出的有效你的贴图数据。

最后，你多注意下 渲染上下文CanvasRenderingContext2D 和 canvas元素HTMLCanvasElement的区别；
相信你搞明白之后，你应该会对canvas这个元素用的非常顺手；

Answer 2

要区分canvas 绘制上下文和canvas DOM元素。
最终通过toDataUrl生成的图片，是canvas 绘制上下文生成的图片。

canvas有自己的2D渲染上下文，需要调用drawImage去绘制图片。如果是绘制背景图的话，需要留意它的层级。

如果是给canvas DOM元素设置了一个css属性background-image的话，它是浏览器的一个layer。

试试下面的代码:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

image.onload = drawImage;

image.src = '你的图片路径';

function drawImage() {
  ctx.drawImage(this, 0, 0);
}

Answer 3

背景图与canvas并无关系，你将canvas当成了普通的div标签。canvas的背景图不是这样添加，简而言之，是需要将图片对象加载到canvas上下文，而非内联样式设置。
详情请参阅canvas如何使用图片