Рисовать на холсте, используя текст по умолчанию

Question

i m используя библиотеку croquis, чтобы нарисовать на холсте. его работает отлично

Сценарий: я хочу, чтобы показать какие-то водяного знака или заполнитель на холсте перед нанесением и по щелчку я хочу, чтобы очистить этот заполнитель. Может кто-нибудь сказать мне, что должно быть сделано

Любая помощь будет оценена

С уважением

Answer 1

Это звучит, как вы хотите инициализирует холст с водяными знаками и очистить его от первого щелчка. Я не знаком с библиотекой наброска, но JavaScript решения простым может быть что-то вроде функции ниже - возможно, вы можете внести в него поправку, чтобы соответствовать вашему проекту ...

var firstFlag = true; 
var canvas = $('#canvas'); 
var ctx = canvas.getContext('2d'); 

function watermark(e) { 
    if (firstFlag) { 
     /* firstFlag === true -> add text to canvas */ 
     ctx.fillStyle = '#999'; 
     ctx.font('bold 20px Serif'); 
     ctx.textAlign = 'center'; 
     ctx.fillText('Watermark Text', canvas.width/2, canvas.height/2); 

     /* reset firstFlag */ 
     firstFlag = false; 
    } else { 
     /* firstFlag === false -> clear Canvas */   
     ctx.clearRect(0,0,canvas.width,canvas.height); 

     /* remove eventListener */ 
     canvas.removeEventListener('click',watermark,false); 
    } 
} 

--- 

/* when the page is ready 
    add EventListener to canvas element and... */ 
canvas.addEventListener('click',watermark,false); 
/* ...initialise the canvas by calling watermark() */ 
watermark(false); 

watermark() функция будет вызываться дважды; один раз, когда вызывается кодом (последняя строка) и один раз при нажатии элемента холста. Первый вызов watermark() добавляет «Watermark Text» в центр холста: второй вызов (по щелчку) очищает холст и удаляет «щелчок» eventListener, так что watermark() никогда не вызывается снова, оставляя холст чистым и готовым за все, что вы хотите сделать дальше.

Надеюсь, это поможет. :)