2017-04-19 104 views
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。

编辑:我是一个程序员的基本,如果在我的代码任何错误,请告诉我

回答

0

没关系,我解决它由具有主画布上的所有图像结合在一起。

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