html5使用位移绘制五环,HTML5 Canvas中的桥文本效果

位移

至少有两种方法可以实现弯曲的文本效果 - 两者都有相同的像素位移原理(相对于它们的实际位置将它们移出位置)，这只是我们用来做哪种方法的问题此

在下面的演示中，我将使用内部drawImage方法进行简单切片。可选我们可以迭代像素缓冲区并手动投影像素，但对于这样的情况，使用切片IMO更简单，我们可以免费获得抗锯齿。

示例+演示

以下是一个完整的示例(请参阅滑块和自定义文本的演示)：

结果将是：

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);

}

}

关于偏移的注意事项：偏移可以是很多东西 - 在这个演示中，我让它成为文本的最顶层来“纠正”弯曲一点，因为文本没有在最顶部绘制(由于各种字形几何我不打算进入这里) - 你会在Chrome和Firefox之间清楚地看到这一点，因为文字的呈现方式不同。

通过该演示，您可以更改文本并调整一些参数，以便查看它们对文本的影响。

工作原理

首先将宽度除以我们想要在x轴上移位的像素数。这为我们提供了每个像素步骤需要使用的增量角度。

然后我们使用曲线作为半径，使用正弦计算基于y轴角度的基本距离。由于delta角现在对应于基于x位置的0到180之间的角度，这将为我们提供一条与中心绘制的文本宽度相匹配的漂亮曲线。

我们从底部减去这个值，得到文本底部的y位置。

然后我们从源中选择一个正常大小的切片，一个像素厚，然后我们根据y值将其缩放到目标。这样就可以了。