使用图像创建 Canvas 元素并附加到父元素 [英] Create Canvas element with image and append to parent
问题描述
我需要创建带有图像的 Canvas 元素，并且需要附加到父元素，为此我已经完成了
I need to create Canvas element with image and need to append to parent for this i have done this
<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>
它给空白画布
有人可以指导我吗?
推荐答案
您正在以错误的方式使用 drawImage().不是在 (0,0) 处绘制图像，而是在画布区域外绘制图像，因为宽度和高度是通常的位置.
You are using drawImage() the wrong way. Instead of drawing the image at (0,0) you are drawing it just outside the canvas area as width and height is where position normally goes.
有效签名为:
context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
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 是增量位置(相对于原点，未翻译时通常为 (0,0)).没有指定宽度和高度 drawImage() 将默认使用图像的自然宽度和高度.
Where dx and dy are delta position (relative to origin, normally (0,0) when untranslated). Without width and height specified drawImage() will by default use the image's natural width and height.
第二个版本允许覆盖默认大小，第三个版本允许您从一个区域绘制到另一个区域.
The second version allows to override the default size, and the third will allow you to draw from one region to another.
更正示例:
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(我认为这不是您想要的，但以防万一..):
That being said, if you only need the image appended there is no need to go via canvas. Just add the image to DOM directly (I assume this is not you want, but just in case..):
var image = new Image();
image.src = "tile.png";
document.body.appendChild(image);
这篇关于使用图像创建 Canvas 元素并附加到父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
