在透明背景上创建不透明文本渐变

本文介绍了在透明背景上创建不透明文本渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

它应该像 img190.imageshack.us/img190/1686/ textgradient.jpg 棘手的部分是，它应该适用于歌剧，画布..？也很重要：透明度只需要截图中的大文本。

it should look like img190.imageshack.us/img190/1686/textgradient.jpg the tricky part is, it should work for opera, canvas..? also important: the transparency is only needed for the big texts in the screenshot.

文本是span标记中的简单html文本。背景是一个有点透明的png，定义为容器div的css背景图片。 我不会使用画布或类似的东西来显示文本。 / p>

the text is simple html text in a span tag. the background is a somewhat transparent png, defined as css background-image of the container div. i'd have no problems with using canvas or something like that for displaying the text.

推荐答案

很好，这是一个漫长的一天，我自己找到一个解决方案。 它使用画布。

well, it was a long day, and i've found a solution by myself. it uses canvas.

用于html高度为73px和宽度为720px的画布：

for a canvas with html height 73px and width 720px:

var ctx = myCanvasEl.getContext("2d"); ctx.font = "53pt Arial, Helvetica, sans-serif"; var gradient = ctx.createLinearGradient(400, 0, 650, 0); gradient.addColorStop(0, "rgb(255,255,255)"); gradient.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = gradient; ctx.fillText(myText, 0, 58);