我想从第一个 Canvas 生成图像,然后在另一个 Canvas 上绘制,但我有一个问题,因为我不知道为什么我在另一个 Canvas 上看不到任何内容。这是我的代码:
<canvas id="gameCanvas" width="704" height="608" />
<script type='text/javascript'>
// prepaire our game canvas
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 2048;
ctx.canvas.height = 2048;
var rows = 64;
var columns = 64;
this.image = new Image();
var imageObject = document.createElement("img");
var me = this;
/// need this as loading is async
imageObject.onload = function() {
for (var i = 0; i < rows; i++) {
for (var j=0; j <columns; j++) {
ctx.drawImage(this, i*32,j*32,32,32);
}
}
// store the generate map as this image texture
me.image.src = ctx.canvas.toDataURL("image/jpg");
}
imageObject.src='ground.jpg';
this.image.src = ctx.canvas.toDataURL("image/jpg");
context.drawImage(this.image, 0, 0, 300, 300, 0, 0, 300,300);
</script>
请问为什么它不起作用?
最佳答案
创建 DOM 元素后,您应该将其附加到其他元素上以显示它。
试试这个
脚本:
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var image=document.createElement("img");
image.onload=function(){
canvas.width = image.width;
canvas.height=image.height;
ctx.drawImage(image,0,0);
var tcanvas = document.createElement('canvas');
var tctx = tcanvas.getContext('2d');
tcanvas.width = 8*image.width;
tcanvas.height = 8*image.height;
for(var i=0;i<8;i++){
for(var j=0;j<8;j++){
tctx.drawImage(image, i*image.width,j*image.height);
document.body.appendChild(tcanvas);
}
}
}
image.src="https://lh4.googleusercontent.com/-L1cr04d6ONc/RsRykgOl9zI/AAAAAAAABIE/WqBGOdiJnys/s128/Finishes.Flooring.Tile.Square.Blue.bump.jpg";
关于javascript - HTML 将图像从 Canvas 复制到另一个 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20132127/