Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Текст поверх изображения в canvas (https://javascript.ru/forum/events/32397-tekst-poverkh-izobrazheniya-v-canvas.html)

x3zone 15.10.2012 14:09

Текст поверх изображения в canvas
 
Здравствуйте!
Как нарисовать текст поверх вставленного изображения через drawImage в canvas?почему то он рисуется под изображением.

Nekromancer 15.10.2012 15:03

Что первое нарисованно, то будет снизу. По умолчанию так.

x3zone 15.10.2012 15:09

Текст стоит последним, но всё равно рисуется снизу.

trikadin 15.10.2012 15:10

Цитата:

Сообщение от Nekromancer
Что первое нарисованно, то будет снизу. По умолчанию так.

x3zone, а если нужно это умолчание поменять - гуглите в сторону globalCompositeOperation)

x3zone 15.10.2012 15:46

globalCompositeOperation тоже почему то не помог.
вот код
ctx.textAlign = "center";
ctx.font = "20px Arial";
ctx.fillStyle = "#4e4e4e";
ctx.fillText("15 120",200,247);
ctx.globalCompositeOperation ="source-over";

может я что не так делаю?как привязать globalCompositeOperation к данному тексту?

trikadin 15.10.2012 16:26

x3zone, телепаты в отпуске. Покажите код более-менее полностью, а то непонятно, когда вы вставляете картинку, а когда текст.

vadim5june 15.10.2012 18:55

<!DOCTYPE html>
<meta charset="utf-8">
<title>QQ</title>
<script>
window.onload=function(){
var img=new Image();
img.onload=function(){run()};
img.src='http://javascript.ru/files/u20687/7_1.jpg';
function run(){
var ctx=document.getElementById('cnv').getContext('2d');
ctx.drawImage(img,0,0);
ctx.textAlign = "center";
ctx.font = "20px Arial";
ctx.fillStyle = "white";
ctx.fillText("15 120",50,57);};
}
</script><canvas id=cnv width=500 height=500></canvas>

x3zone 16.10.2012 08:29

vadim5june спасибо!Получилось.


Часовой пояс GMT +3, время: 12:07.