Question

我正在创建一个画布，为我正在制作的2D游戏创建简单的高度图。在常规画布大小（150px * 300px），它看起来正常，但如果我想向上缩放画布（对于更大的地图）并保持内部内容的大小相同，我目前正在做的不起作用。

我的代码在这里：

<body>
<script>
var hai = 1; //World width. I was tinkering with this to make the result that I wanted, but at the end, the entire heigtmap needs to be exported via base64 url. 5 canvas' right next to eachother LOOKS like what I want, but I can't get a base64 url for all 5 together, only one.
var runnin = 0;
while(runnin != hai){
var can = document.createElement("canvas");
can.id = "canvasite"
can.style = "width: 150px; height: 75px;"
document.body.appendChild(can);
c = document.getElementById('canvasite'),
    ctx = c.getContext('2d');
    var x = 0
    if(runnin == 0){
var endheight = c.height/2
}
    var y = endheight;
var widd = 0
while(widd != c.width){
    ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
ctx.fillRect( x, y, 1, 1 );
var ychan = Math.floor((Math.random() * 6) + 1);
if(ychan == 1){
var y=y+2
}else if(ychan == 2){
var y=y+1
}else if(ychan == 3){
var y=y-1
}else if(ychan == 4){
var y=y-2
}else{
var y=y
}
var hig = y
while(hig != c.height){
    ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
ctx.fillRect( x, hig, 1, 1 );
var hig = hig+1
}
var widd = widd+1
var x=x+1
}
var endheight = y
var runnin = runnin+1
document.getElementById('canvasite').setAttribute('id','nAn')
}
</script>
</body>

正如我所说，它提供了我想要的一半。它确实提供了一个很长的高度图，但我无法从中获得base64网址。

总结一下，我尝试的东西不允许我有一个完整的base64网址，如果世界宽度是3，我可以得到相同的东西，但在1画布中，所以我可以得到一个base64网址从它？

提前致谢，Athdot。

编辑：我是一名基本程序员，如果我的代码有任何错误，请告诉我

Answer 1

没关系，我通过让主画布将所有图像组合在一起来解决它。

＆＃13;

<body>
<script>
var granmoe = 0;
var hai = 5;
var runnin = 0;
while(runnin != hai){
	var can = document.createElement("canvas");
	can.id = "canvasite"
	can.style = "width: 150px; height: 100px; display:none;"
	document.body.appendChild(can);
	c = document.getElementById('canvasite'),
    ctx = c.getContext('2d');
    var x = 0
    if(runnin == 0){
		var endheight = c.height/2
	}
    var y = endheight;
	var widd = 0
	while(widd != c.width){
    	ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
		ctx.fillRect( x, y, 1, 1 );
		var ychan = Math.floor((Math.random() * 6) + 1);
		if(ychan == 1){
			var y=y+2
		}else if(ychan == 2){
			var y=y+1
		}else if(ychan == 3){
			var y=y-1
		}else if(ychan == 4){
			var y=y-2
		}else{
			var y=y
		}
		var hig = y
		while(hig != c.height){
    		ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
			ctx.fillRect( x, hig, 1, 1 );
			var hig = hig+1
		}
		var widd = widd+1
		var x=x+1
	}
    {
	var endheight = y
	var runnin = runnin+1
	document.getElementById('canvasite').setAttribute('id','nAn')
	var imgm = document.createElement("img");
	imgm.src = c.toDataURL();
    imgm.id = "imageitem"
    imgm.style = "display:none;"
	document.body.appendChild(imgm)
	var xid = granmoe*(300*(1/hai));
	if(granmoe == 0){
		var cansfoo = document.createElement("canvas")
		cansfoo.id = "fullimage";
		cansfoo.style = 'width: '+(hai*150)+'px; height: 75px; display: none;'
		document.body.appendChild(cansfoo);
	}
	var ci=document.getElementById("fullimage");
	var ctxi=ci.getContext("2d");
	var imd=document.getElementById("imageitem");
	ctxi.drawImage(imd,xid,0,(300*(1/hai)),180);
	//end
	var granmoe=granmoe+1
	document.getElementById("imageitem").setAttribute('id','non');
}
}
var base64 = ci.toDataURL();
var bass = document.createElement("img");
bass.src = base64
bass.id = "resiz"
bass.style = "display:none;"
document.body.appendChild(bass);
{
		var resize = document.createElement("canvas")
		resize.id = "resize";
		resize.style = 'width: '+(hai*150)+'px; height: '+(hai*150)/2+'px; border: 1px solid;'
		document.body.appendChild(resize);
	var re=document.getElementById("resize");
	var res=re.getContext("2d");
    	var imag=document.getElementById("resiz");
	res.drawImage(imag,0,50,300,50);
    }
</script>
</body>

＆＃13;

HTML- Canvas元素增加了大小，但保持内容大小相同

1 个答案: