Question

我使用croquis库在画布上画画。工作正常

方案：我想在绘图之前在画布上显示某种水印或占位符，然后点击我想要清除该占位符。有人可以告诉我需要做什么

任何帮助将不胜感激

此致

Answer 1

听起来您想要使用水印初始化画布并在第一次单击时将其清除。我不熟悉Croquis库，但是一个简单的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()函数将被调用两次;一次由代码（最后一行）调用，一次在单击canvas元素时调用。第一次拨打watermark()会添加＆＃34;水印文字＆＃34;到画布的中心：第二个调用（单击时）清除画布，并删除“点击”按钮。 eventListener以便永远不会再调用watermark()，让画布保持干净并准备好接下来要做的其他事情。

希望这会有所帮助。：）

使用默认文本在画布上绘制

1 个答案: