JavaScript Canvas ，渲染 map

Question

我正在尝试以某个 Angular 渲染我的游戏 map ctx.setTransform(1, -0.5, 1, 0.5, 0, 200);(标准是 ctx. setTransform(1, 0, 0, 1, 0, 0);).

但是我有一些台词:

.

代码如下:

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>

Answer 1

使用变换会导致绘图之间出现间隙，人们认为这些间隙是邻接的。这是由于绘图坐标使用 float 而不是整数和转换数学导致对齐差异造成的。

可能最简单的解决方法是将整个场景稍微放大一个非常小的尺寸，这样可以隐藏对齐差异。即使 +2% 通常也能得到预期的结果。

这是您重构后的代码，可缩放至原始大小的 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>

[糟糕! Firefox 因这个修复而疯狂。我会很快回来修复这个问题:-O]

好的...让我们再试一次。 同样的想法:增加到 102%，但这次将 .svg 转换为 .png 以便 FireFox 受益。您可以通过将 svg 绘制到 Canvas 并将该 Canvas 用作图像源而不是 pic 来即时进行转换(是的，您可以 drawImage 一个 Canvas 到另一个 Canvas 上)。您还可以转换为 .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);
}