JavaScript画布,渲染地图
作者：互联网
我试图通过某个角度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>解决方法:
使用变换将导致人们认为相邻的图纸之间存在间隙.这是因为绘图坐标使用浮点而不是整数而变换数学会导致对齐差异.
可能你最简单的解决方法是用一个非常小的尺寸稍微放大整个场景,这将隐藏对齐差异.即使是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>[OOPS！ Firefox已经解决了这个问题.我很快就会回来修复修复：-O]
好的……让我们再试一次.相同的想法：增加到102％,但这次将.svg转换为.png以获得FireFox的好处.您可以通过将svg绘制到画布并使用该画布作为图像源而不是pic来实时进行转换(是的,您可以将一个画布绘制到另一个画布上).您也可以转换为.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);
}
标签：javascript,html5,canvas,game-engine 来源： https://codeday.me/bug/20190623/1270613.html