Как вы заполняете текст в холсте с изображением?

Недавно я работал с холстом HTML5 и задавался вопросом, есть ли способ заполнить текст изображением вместо сплошного цвета?Как вы заполняете текст в холсте с изображением?

я в настоящее время получить что-то вроде этого, чтобы работать:

What I can do

Но мне нужен текст, чтобы выглядеть как (может быть сделано в Photoshop):

Example

I «Много раз читал о том, что иногда приходится рисовать детали на изображении на 2-м холсте и импортировать чертеж на основной видимый холст, но большая часть этого была связана с тонированием изображений (не уверен, что это будет работать здесь).

Зачем мне это нужно: как вы видите, контроллер выше хорош и shinny, но текст не является, и клиент хочет, чтобы я вытащил цвет текста из разных цветов оболочки контроллера, чтобы он выглядел реалистично, как возможное.

При поиске еще нескольких я нашел this example, что именно то, что я хочу. Но, к сожалению, проблема с примером заключается в том, что мне тогда нужно каким-то образом экспортировать только текст изображения, который, как я думаю, невозможен, поэтому его можно перенести в новое изображение без черного внешнего слоя, покрывающего часть контроллер.

Если кто-то пошлет меня в правильном направлении, независимо от его сложности, я буду очень благодарен.

P.S. Вот если жеребьёвка Порядок контроллера:

Shell
Текст
части/Назад
Thumb Палочки
Кнопка Руководства
ABXY Кнопка
Маски вокруг контроллера (предотвратить текст переполнение)

источник

2013-10-09 Steven10172

Вы можете использовать компоновку, чтобы заменить непрозрачные пиксели текста с накладным изображением

enter image description here

Этот код использует context.globalCompositeOperation = «источник-ин», чтобы заменить только текстовые пиксели с соответствующими пикселями изображения:

// put text on canvas 
ctx.beginPath(); 
ctx.font="72pt Verdana"; 
ctx.fillText("XBOX",10,100); 
ctx.fill(); 


// use compositing to draw the background image 
// only where the text has been drawn 
ctx.beginPath(); 
ctx.globalCompositeOperation="source-in"; 
ctx.drawImage(img,0,0);

Вот код и Fiddle: http://jsfiddle.net/m1erickson/atM4m/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=document.createElement("img"); 
    img.onload=function(){ 
     draw(); 
    } 
    img.src="http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg"; 

    function draw(x){ 

     ctx.save(); 
     ctx.beginPath(); 

     // put text on canvas 
     ctx.font="72pt Verdana"; 
     ctx.fillText("XBOX",10,100); 
     ctx.fill(); 


     // use compositing to draw the background image 
     // only where the text has been drawn 
     ctx.beginPath(); 
     ctx.globalCompositeOperation="source-in"; 
     ctx.drawImage(img,0,0); 
     ctx.restore(); 
    } 





}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

источник

2013-10-09 15:45:12 markE

большое спасибо. Не было так сложно, просто не знали о beginPath и globalCompositeOperation. – Steven10172

Да. Html Canvas - это не так сложно. И у него есть много скрытых возможностей ... Проверьте демонстрации возможностей на этом сайте, если вы хотите узнать больше: http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/ Удачи с вашим проектом! :) – markE

Как вы заполняете текст в холсте с изображением?

ответ

Смежные вопросы