提交后 canvas 上显示的水印
Watermark to appear on canvas after submit
我有一个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);
我真的希望你能帮助我了解如何使水印按照我想要的方式运行。
我对你的 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 以跟踪何时需要显示文本等。
我有一个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);
我真的希望你能帮助我了解如何使水印按照我想要的方式运行。
我对你的 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 以跟踪何时需要显示文本等。