Question

我有一个插件，可以使用以下内容基于图像填充文本：

function draw() {
        //grab font to use
        var fFamily = $(".activeText a .fontType-cont").val();
        ctx.font = startFontSize + 'px ' + fFamily;
        ctx.fillText(text, 10, 100);

        ctx.globalCompositeOperation = 'source-in';
        ctx.drawImage(img, 10, 20, 500, 100);
}

var canvas = document.getElementById(current),
ctx = canvas.getContext('2d'),
img = document.createElement('img');
//draw it
img.onload = draw;

img.src = $(".activeGColor").find('img').attr('src');

画布将采用该图像，将其显示在画布中，随着文本变大，您将其视为文本的填充。我的问题是，我怎样才能使它看起来不那么紧张或什么？我可以选择这样做吗？

你有什么想法？

Answer 1

我们需要看到这里发生的事情的一个例子。你的问题听起来好像你正在进行某种动画......将字体大小改变为越来越大的尺寸。默认情况下，工作方式是文本按比例呈现。但是如果你使用像ctx.scale（）这样的东西，你显然可以抛弃它。此外，如果你不是每一帧都清理你的画布，你可能会得到更多的流血效果，你可能会描述为拉伸。

使用Canvas fillText（） - HTML5，JavaScript

1 个答案: