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

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

   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); }      

它给空白canvas

有人可以指导我吗？

Answer 1

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

有效签名是：

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()将默认使用图像的自然宽度和高度。

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

资源

更正示例：

 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-qc-800-400-7.jpg"; document.body.appendChild(canvas); } 

Answer 2

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

在我的情况下，我使canvas与图像一样大（而不是任意400×800），您可能需要更新以满足您的要求。

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

更新

它使用隐藏图像作为源。

我希望这对你有用。

 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); } 

 .canvas { border: solid red 1px; }