这是我的代码：
img.onload = function() {
ctx.drawImage(img, 0, 0, 600, 480);
ctx.lineWidth = 4;
ctx.font = "3em 'Lato'";
ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';
var text = 'Custom Text';
text = text.toUpperCase();
x = canvas.width/2;
y = canvas.height - canvas.height/4.5;
ctx.strokeText(text, x, y);
ctx.fillText(text, x, y);
}
画布上的字体不是 Lato。阅读其他答案后，我认为这可能是因为我没有在任何其他 HTML 元素上使用它，但后来我还添加了一个使用该Lato字体的标题。还有其他原因可能导致此问题吗？
我使用以下标记创建了一个画布:
<canvas id="canvas"></canvas>
现在,如果我指定width并height直接在这里,然后在画布上的图纸将是非常尖锐的.
<canvas id="canvas" width="600px" height="400px"></canvas>
但是这样我无法灵活地缩放画布以覆盖每个屏幕尺寸.使用vh或vw代替像素也不起作用.我尝试在JavaScript中设置它们:
$('#canvas').css({
"height": window.innerHeight,
"width": window.innerWidth
});
这覆盖了整个画布,但使线条模糊.有什么方法可以在画布仍然覆盖整个屏幕的同时获得清晰的图像吗？
我试过用:
$("#canvas")
.prop("width", window.innerWidth)
.prop("height", window.innerHeight);
但画布上的物体(例如我画的圆圈)仍然模糊不清.当我打开devTools时,我看到以下标记:
<canvas id="canvas" style="height: 768px; width: 1366px;"></canvas>
所以,我猜宽度和高度仍然由CSS定义.
我正在学习 SVG。到目前为止，它一直很棒，但现在我坚持使用表值进行颜色传输。下面是一个例子：
<feFuncR type="table" tableValues="1 0 0 0"></feFuncR>
此功能将红色实心条更改为黑色。我想知道tableValues属性是如何工作的，以便我可以自己弄清楚颜色的变化。我找不到任何详细解释它的文章。