HTML5画布中的桥文本效果 [英] Bridge Text Effect in HTML5 Canvas
问题描述
想创建一个桥文本效果像下面，我尝试使用arctext，但它doesnt帮助。我尝试google的id，但它不明白桥文本形状。
Want to create a Bridge Text Effect like below, i tried using arctext but it doesnt help. I tried to google id but it doesnt understand Bridge text Shapes.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = '30pt Calibri';
// textAlign aligns text horizontally relative to placement
context.textAlign = 'center';
// textBaseline aligns text vertically relative to font style
context.textBaseline = 'middle';
context.fillStyle = 'blue';
context.fillText('BRIDGE TEXT', x, y);
</script>
</body>
</html>
推荐答案
替换
至少有两种方法可以实现曲线文本效果 - 两者都具有相同的像素位移原理（将它们移出相对于其真实位置的位置），这只是我们使用哪种方法的问题
Displacement
There are at least two ways you can achieve a curved text effect - both share the same principle of displacement of pixels (moving them out of position relative to their real position), it's just a matter of which method we use to do this.
在下面的演示中，我将使用内部 drawImage 方法进行简单切片。可选我们可以迭代像素缓冲区并手动投影像素，但对于这种情况，使用切片IMO更简单，我们可以免费获得抗锯齿。
In the following demo I will use simple slicing using the internal drawImage method. Optional we could have iterated the pixel buffer and manually projected the pixels but for cases such as this it's simpler to use slicing IMO and we get anti-aliasing for free.
下面是一个完整的示例（请参阅滑块和自定义文本的演示）：
Here is a full example (see demo for sliders and custom text) on one way of doing this:
ONLINE DEMO HERE
结果将是：
var ctx = demo.getContext('2d'), /// get canvas
font = '64px impact', /// define font
w = demo.width, /// cache width and height
h = demo.height,
curve, /// curve for our text
offsetY, /// offset from top (see note)
bottom, /// bottom origin
textHeight, /// height of text
angleSteps = 180 / w, /// angle steps per pixel
i = w, /// counter (for x)
y,
os = document.createElement('canvas'), /// off-screen canvas
octx = os.getContext('2d');
/// set off-screen canvas same size as our demo canavs
os.width = w;
os.height = h;
/// prep text for off-screen canvas
octx.font = font;
octx.textBaseline = 'top';
octx.textAlign = 'center';
/// main render function
function renderBridgeText() {
/// snipped... get various data (see demo for detail)
/// clear canvases
octx.clearRect(0, 0, w, h);
ctx.clearRect(0, 0, w, h);
/// draw the text (see demo for details)
octx.fillText(iText.value, w * 0.5, 0);
/// slide and dice (MAIN)
i = w;
while (i--) {
/// calc distance based on curve (=radius) and x position
y = bottom - curve * Math.sin(i * angleSteps * Math.PI / 180);
/// draw the slice for this vertical line
ctx.drawImage(os, i, offsetY, 1, textHeight,
i, offsetY, 1, y);
}
}
注意offset：offset可以是很多东西这个演示我让它成为文本的顶部来源纠正弯曲一点，因为文本不是在最顶部绘制（由于各种字形几何，我不会在这里） - 你会看到这个
Note on offset: offset can be many things - in this demo I let it be the top source of the text to "correct" the curving a little as texts aren't drawn at the very top (due to various glyph geometry which I'm not gonna into here) - you will see this clearly between Chrome and Firefox as the text is rendered differently.
这个演示让你改变文本和调整几个参数，这样你可以看到他们对文本有什么影响。
The demo let you change text and adjust a few parameters so you can see what effect they have on the text.
宽度首先按x轴上要移动的像素数。这给出了我们需要为每个像素步骤使用的增量角。
The width is divided first on number of pixels we want to displace on the x axis. This gives us the delta angle we need to use for each pixel step.
然后，我们使用曲线作为半径，基于y轴使用正弦的角度计算基本距离。由于delta角度现在对应于基于x位置的从0到180的角度，这将给出与在中心绘制的文本宽度匹配的很好的曲线。
Then we calculate a basic distance based on angle for y-axis using sinus using curve as radius. As the delta angle now corresponds to an angle from 0 to 180 based on x position this will gives us a nice curve matching the text width which is drawn in center.
然后我们从源中选择一个正常大小的切片，一个像素厚，然后缩放它到基于y值的目的地。这是骗局。
Then we pick a normal sized slice from the source, one pixel thick, and we scale it to destination based on the y value. This does the trick.
这篇关于HTML5画布中的桥文本效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
