All geek questions in one place

Javascript canvas map display

I am trying to display my map for the game from a certain angle ctx.setTransform(1, -0.5, 1, 0.5, 0, 200);(standard is ctx.setTransform(1, 0, 0, 1, 0, 0);).

But then I have a few lines:

like a border.

Here is the code:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'),	
	cellSize  = 50,                                 
	pic       = new Image(),                        
	map       =                                     
	[
		[{x:5,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
		[{x:4,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1}]
	];

canvas.width  = 16 * cellSize;
canvas.height = 16 * cellSize;
ctx.setTransform(1, -0.5, 1, 0.5, 0, 200);
pic.src = 'http://promodesign.kei.pl/cb/test/sprite.svg';
pic.onload = function() {  
	for (var j = 0 ; j < 8; j ++)
		for (var i = 0; i < 8; i ++)
		  ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 50, 50, j*cellSize, i*cellSize, 50, 50);

	var pic2 = new Image(); pic2.src = 'http://promodesign.kei.pl/cb/test/man.png';
	pic2.onload = function() {
   		ctx.setTransform(1, 0, 0, 1, 0, 60);
   		ctx.drawImage(pic2, 150, 75);
	}
}
<canvas id="canvas"></canvas>
Run codeHide result
+4
source share
1 answer

Using transformations will lead to a gap between the drawings, which are likely to be snapped. This is because the coordinates of the drawings use floating points rather than integers, and the math of the transformation causes differences in alignment.

Probably your easiest solution is to slightly enlarge the entire scene by a very small size, which will hide the alignment difference. Even + 2% usually gives the desired result.

enter image description here

102% .

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'),	
	cellSize  = 50,                                 
	pic       = new Image(),                        
	map       =                                     
	[
		[{x:5,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
		[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
		[{x:4,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1}]
	];
var scaleFix=1.02;

canvas.width  = 16 * cellSize;
canvas.height = 16 * cellSize;
ctx.setTransform(1.00, -0.5, 1.00, 0.5, 0, 200);
pic.src = 'http://promodesign.kei.pl/cb/test/sprite.svg';
pic.onload = function() {  
	for (var j = 0 ; j < 8; j ++)
		for (var i = 0; i < 8; i ++)
		  ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 50, 50, j*cellSize, i*cellSize, 50*scaleFix, 50*scaleFix);

	var pic2 = new Image(); pic2.src = 'http://promodesign.kei.pl/cb/test/man.png';
	pic2.onload = function() {
   		ctx.setTransform(1, 0, 0, 1, 0, 60);
   		ctx.drawImage(pic2, 150*scaleFix, 75*scaleFix);
	}
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<h4>Content scaled to 102% to hide transformational gaps.</h4>
<canvas id="canvas" width=300 height=300></canvas>
Hide result

[OOPS! Firefox. : -O]

... . : 102%, .svg .png FireFox. " ", svg pic (, drawImage ). .svg .png .svg.

: SVG PNG :

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'),  
  cellSize  = 50,                                 
  pic       = new Image(),                        
  map       =                                     
  [
    [{x:5,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
    [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
    [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
    [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
    [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}], 
    [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
    [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
    [{x:4,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1}]
  ];
var scaleFix=1.02;

canvas.width  = 16 * cellSize;
canvas.height = 16 * cellSize;
ctx.setTransform(1.00, -0.5, 1.00, 0.5, 0, 200);

var pic2=new Image();
pic2.onload=start;
pic2.src='http://promodesign.kei.pl/cb/test/man.png';

var pic;
var img=new Image();
img.onload=start;
img.src='http://promodesign.kei.pl/cb/test/sprite.svg';
var imgCount=2;

function start(){
    if(--imgCount>0){return;}
    pic=document.createElement('canvas');
    pic.width=img.width;
    pic.height=img.height;
    pic.getContext('2d').drawImage(img,0,0);
    drawScene();
    document.body.appendChild(pic);
}

function drawScene(){
    for (var j = 0 ; j < 8; j ++)
    for (var i = 0; i < 8; i ++){{
        ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 50, 50, j*cellSize, i*cellSize, 50*scaleFix, 50*scaleFix);
    }}
    ctx.setTransform(1, 0, 0, 1, 0, 60);
    ctx.drawImage(pic2, 150*scaleFix, 75*scaleFix);
}
+4

Source: https://habr.com/ru/post/1624869/

More articles:


All Articles