提交后 canvas 上显示的水印

Question

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

请看这个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

做了一些小改动

添加了这 2 个函数来添加文本和清除 canvas:

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 进行了一些其他更改，添加了变量 drawnOnCanvas 以跟踪何时需要显示文本等。

提交后 canvas 上显示的水印

Watermark to appear on canvas after submit

javascript

html

canvas

submit

watermark