0
我正在创建一个画布事物来为我制作的2D游戏创建简单的高度图。在普通的画布尺寸(150px * 300px)下,它看起来很正常,但如果我想缩放画布(对于更大的地图),并将内部内容的大小保持相同的大小,我目前所做的并不起作用。HTML-画布元素增加尺寸,但保持内容尺寸相同
我的代码是在这里:
<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 url,并且如果世界宽度是3,但是在1 canvas中,我可以得到相同的结果,所以我可以得到一个base64从它的网址?
在此先感谢,Athdot。
编辑:我是一个程序员的基本,如果在我的代码任何错误,请告诉我