根据画布

Question

嗨，很棒的人，

我正在开发一种设计名片的工具。我已经将画布的dpi增加到200，因此客户可以在不必考虑实际尺寸的情况下进行设计。

canvas.width = 3.5 inches * 200;  // width would be 700px 
canvas.height = 2 inches * 200; // height would be 400px

我的问题是如何将文本设置为200 dpi？我做的是这个。

var scale_ratio = 200/72;
var pointsize = 14;
var xcord = 20;
var ycord = 20;

this.context.font = pointsize * scale_ratio + 'px' + " Arial";
this.context.fillText("Hello World", xcord, ycord + pointsize * scale_ratio);

我做了正确的做法吗？ 感谢

Answer 1

ctx.setTransform

相反缩放字体和所有渲染调用参数，设置变换以便为您缩放所有渲染。

为标准DPI设置字体，线宽等（看起来你使用的是72 DPI）

const nativeDPI = 72; // what ever value you where using
ctx.font = "14px Arial";
ctx.lineWidth = 1;
const textPos = {x : 20, y : 20};
const box = {x : 3, y : 3, w : 246, h: 138};

使用函数ctx.setTransform(xAxisX, xAxisY, yAxisY, yAxisY, originX, originY)将缩放渲染到正确的DPI时前两个值是像素x轴的长度和方向，接下来的两个是y轴，后两个是绝对画布像素坐标起源。

const workingDPI = 200;
var scale = workingDPI / nativeDPI;  // get the scale change
ctx.setTransform(scale, 0, 0, scale, 0, 0);  // set the new scale

ctx.fillText("blah blah.", textPos.x, textPos.y);
ctx.strokeRect(box.x, box.y, box.w, box.h);

如果您需要恢复到像素比例，可以使用

设置默认转换

ctx.setTransform(1, 0, 0, 1, 0, 0);