JavaScript画布，渲染地图

Question

我正试图以某种角度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

使用变换会导致人们认为相邻的图纸之间存在间隙。这是因为绘图坐标使用浮点而不是整数而变换数学会导致对齐差异。

可能你最简单的解决方法是将整个场景略微放大一个非常小的尺寸，这将隐藏对齐差异。即使+ 2％通常也会得到理想的结果。

这是您重构的代码，可扩展到原始大小的102％。

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>

.svg

[OOPS！ Firefox已经解决了这个问题。我很快就会回来修复修复：-O]

好的......让我们再试一次。 相同的想法：增加到102％，但这次将.png转换为pic以获得FireFox的好处。您可以通过将svg绘制到画布并使用该画布作为图像源而不是drawImage来实时进行转换（是的，您可以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); } 将一个画布放到另一个画布上）。您也可以转换为.svg本身并提供.png而不是.svg。

示例：在客户端即时转换SVG到PNG：

ControlTemplate