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

提交后，水印将显示在画布上

1 个答案: