简体   繁体   中英

How to write text over a drawn canvas?

i have drawn over a ribbon with the code:

var canvas = document.getElementById('draw-ribbon');
ctx = canvas.getContext("2d");
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(260, 75);
ctx.lineTo(300, 150);
ctx.lineTo(0, 150);
ctx.closePath();
ctx.fill();

got this:

在此处输入图片说明

after this i have tried filltext() but didn't work i want to achieve this:

在此处输入图片说明

May be not working because the text color is also red

var canvas = document.getElementById('myCanvas');
ctx = canvas.getContext("2d");
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(260, 75);
ctx.lineTo(300, 150);
ctx.lineTo(0, 150);
ctx.closePath();
ctx.fill();
ctx.font="30px Verdana";
ctx.fillStyle = 'white';
ctx.fillText("Text",50,80);

http://jsfiddle.net/dvdyakonov/zFg5q/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM