Форум

x3zone · #1 (**permalink**) 15.10.2012, 14:09

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

Nekromancer · #2 (**permalink**) 15.10.2012, 15:03

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

x3zone · #3 (**permalink**) 15.10.2012, 15:09

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

trikadin · #4 (**permalink**) 15.10.2012, 15:10

Сообщение от Nekromancer

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

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

x3zone · #5 (**permalink**) 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 · #6 (**permalink**) 15.10.2012, 16:26

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

vadim5june · #7 (**permalink**) 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 · #8 (**permalink**) 16.10.2012, 08:29

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

Форум

Справочник

Discord чат

Курсы javascript