0
저는 제작하고있는 2D 게임에서 간단한 하이트 맵을 만들기 위해 캔버스를 만듭니다. 일반 캔버스 크기 (150px * 300px)에서는 정상적으로 보입니다. 그러나 캔버스를 확대 (큰지도의 경우)하고 내부 내용의 크기를 동일한 크기로 유지하려면 현재 수행중인 작업이 작동하지 않습니다.HTML- Canvas 요소는 크기는 늘리지 만 내용은 같은 크기로 유지하십시오.
내 코드는 여기에 있습니다 :
<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>나는 그것에서 말하는 것처럼, 내가 원하는 것을의 절반을 제공합니다. 긴 하이트 맵을 제공하지만 베이스64 URL을 얻을 수 없습니다.
모두 합쳐서 내가 시도한 바를 통해 완전한 base64 URL을 가질 수 없으며 세계 너비가 3이지만 1 캔버스에서 동일한 값을 얻을 수 있으므로 base64를 얻을 수 있습니다. 그것으로부터 URL을?
미리 감사드립니다. Athdot.
편집 : 나는 내 코드에서 어떤 실수가 있다면, 내가 마스터 캔버스 함께 모든 이미지를 결합함으로써 그것을 해결, 나에게