提交后水印出现在画布上

Question

我有一个 HTML 画布，您可以为圆圈选择颜色和大小，当点击时，圆圈会出现。现在，我希望在绘制圆圈之前看到带有文本“Hello”的水印，然后在开始绘制时消失，并且画布恢复为白色。 我还有一个删除所有圆圈的提交按钮，我希望在单击按钮时出现水印。 我很抱歉我的英语不好，但我希望你能理解我的问题。

请看这个jsFiddle。

Javascript

function initiateCanvasCircle() {
var context = document.getElementById('myCanvas').getContext('2d'),
    input = document.getElementById( 'myColor' ),
    size = document.getElementById( 'mySize' ),
    watermark = document.getElementById( 'myWatermark' );
context.canvas.addEventListener('mousemove', function(event) {
    var mouseX = event.clientX - context.canvas.offsetLeft;
    var mouseY = event.clientY - context.canvas.offsetTop;

});

context.canvas.addEventListener('click', function(event) {
    var mouseX = event.clientX - context.canvas.offsetLeft;
    var mouseY = event.clientY - context.canvas.offsetTop;

    context.beginPath();
    context.arc(mouseX, mouseY, size.value / 2, 0, 2 * Math.PI, false);


    context.fillStyle = input.value ? '#' + input.value : '#333';

    context.fill();
});

}

function circle() {
    window.addEventListener('click', function(event) {
        initiateCanvasCircle();
    });
}

function drawCircle() {
    circle();
}

initiateCanvasCircle();



// Button   
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

  document.getElementById('clear').addEventListener('click', function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }, false);
  myCanvas.addEventListener('click', function() { }, false);

我真的希望你能帮助我了解如何让水印按照我想要的方式运行。

Answer 1

我对你的Fiddle做了一些小改动

添加了这两个函数来添加文本和清除画布：

function drawText() {
     var x = canvas.width / 2;
     var y = canvas.height / 2;

      context.font = '30pt Calibri';
      context.textAlign = 'center';
      context.fillStyle = 'blue';
      context.fillText('Hello World!', x, y);   
}

function clearCanvas(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawnOnCanvas = false;
}

以及对 onClick 的一些其他更改，添加了变量 drawOnCanvas 以跟踪文本何时​​需要出现等。