我是一个有用的助手,可以为您翻译文本。
我正在尝试创建一个简单的画布网格,它将根据玩家当前的缩放级别和一定的画布高度/宽度比例屏幕限制来自适应。以下是我目前的进展:
JS:
现在,我成功地让画布在每个屏幕分辨率缩放级别上保持相同的比例水平。这是我试图实现的一部分。我还试图实现细线,在所有不同的缩放级别下看起来都相同,并且当然要消除模糊。目前,线条的粗细会根据缩放级别而改变,并且有时会模糊。
我正在尝试创建一个简单的画布网格,它将根据玩家当前的缩放级别和一定的画布高度/宽度比例屏幕限制来自适应。以下是我目前的进展:
JS:
var bw = window.innerWidth / 2; //canvas size before padding
var bh = window.innerHeight / 1.3; //canvas size before padding
//padding around grid, h and w
var pW = 30;
var pH = 2;
var lLimit = 0; //9 line limit for both height and width to create 8x8
//size of canvas - it will consist the padding around the grid from all sides + the grid itself. it's a total sum
var cw = bw + pW;
var ch = bh + pH;
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
var context = canvas.get(0).getContext("2d");
function drawBoard(){
for (var x = 0; lLimit <= 8; x += bw / 8) { //handling the height grid
context.moveTo(x, 0);
context.lineTo(x, bh);
lLimit++;
}
for (var x = 0; lLimit <= 17; x += bh / 8) { //handling the width grid
context.moveTo(0, x); //begin the line at this cord
context.lineTo(bw, x); //end the line at this cord
lLimit++;
}
//context.lineWidth = 0.5; what should I put here?
context.strokeStyle = "black";
context.stroke();
}
drawBoard();
现在,我成功地让画布在每个屏幕分辨率缩放级别上保持相同的比例水平。这是我试图实现的一部分。我还试图实现细线,在所有不同的缩放级别下看起来都相同,并且当然要消除模糊。目前,线条的粗细会根据缩放级别而改变,并且有时会模糊。
这里是jsFiddle(虽然jsFiddle窗口本身很小,所以您几乎看不到差异):
https://jsfiddle.net/wL60jo5n/
非常感谢您的帮助。