Question

我需要创建带有图像的Canvas元素，并且需要附加到父级，因为我已经完成了这个

<html>
<head>
    <script>
        window.onload = function() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext("2d");
        canvas.id = "canvas_id";
        canvas.setAttribute("class" ,"canvas");
        canvas.height =  "400";
        canvas.width =  "800";
        var image = new Image();
        image.src = "http://localhost/tile.png";
        image.onload = function(){
           context.drawImage(image, canvas.width, canvas.height);
        }
        document.body.appendChild(canvas);
    }
</script>
</head>
<body>
</body>
</html>

它给空白画布

有人可以指导我吗？

Answer 1

您正在以错误的方式使用drawImage()。您不是在（0,0）处绘制图像，而是将其绘制在画布区域之外，因为宽度和高度是位置通常所在的位置。

有效签名是：

context.drawImage（image，dx，dy）
  context.drawImage（image，dx，dy，dw，dh）
  context.drawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）

其中dx和dy是delta位置（相对于原点，通常在未翻译时为（0,0））。如果没有指定宽度和高度，drawImage()将默认使用图像的自然宽度和高度。

第二个版本允许覆盖默认大小，第三个版本允许您从一个区域绘制到另一个区域。

Source

更正示例：

window.onload = function() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext("2d");
  canvas.id = "canvas_id";
  canvas.className = "canvas";                  // should be className
  canvas.height = 400;                          // should be numbers
  canvas.width = 800;
  var image = new Image();
  image.onload = function() {
    // or set canvas size = image, here: (this = currently loaded image)
    // canvas.width = this.width;
    // canvas.height = this.height;
    context.drawImage(this, 0, 0);              // draw at (0,0), size = image size

    // or, if you want to fill the canvas independent on image size:
    // context.drawImage(this, 0, 0, canvas.width, canvas.height);
  }
  // set src last (recommend to use relative paths where possible)
  image.src = "http://lorempixel.com/output/fashion-q-c-800-400-7.jpg";
  document.body.appendChild(canvas);
}

话虽如此，如果您只需要附加图片，则无需通过画布。只需将图像直接添加到DOM（我假设这不是您想要的，但以防万一..）：

var image = new Image();
image.src = "tile.png";
document.body.appendChild(image);

Answer 2

这是我对它的看法......你需要指出你想要开始绘制的坐标（即0,0）和 - 可选 - 你可以指定画布的大（宽，高）。

在我的情况下，我将画布设置为与图像一样大（而不是任意400x800），您可能需要更新符合您要求的画布。

我添加了一些css来显示画布相对于图像的大小。您也可以根据需要更新/删除它。

<强>已更新

~~它使用隐藏的图像作为源。~~

我希望这对你有用。

＆＃13;

uint32_t

＆＃13;

window.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  canvas.id = 'canvas_id';
  canvas.setAttribute("class", "canvas");

  var image = new Image();
  image.src = 'http://placekitten.com/g/200/300';

  canvas.width = image.width;
  canvas.height = image.height;

  ctx.drawImage(image, 0, 0, image.width, image.height);
  document.body.appendChild(canvas);
}

＆＃13;

.canvas {
  border: solid red 1px;
}

＆＃13;

使用图像创建Canvas元素并附加到父级

2 个答案: