Kann ich Wörter vor meiner Leinwand HTML hinzufügen?

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: Kann ich Wörter vor meiner Leinwand HTML hinzufügen?

by Guest » 14 Feb 2025, 03:50

Ich versuche eine Site zu erstellen, auf der der Benutzer auf dem Bildschirm nach Wörtern suchen kann, indem ich auf einen weißen Hintergrund ziehe. Die Wörter sind in weiß und unsichtbar, bis der Cursor in Schwarz über sie zeichnet und die weiße Umrisse des Wortes enthüllt. .
Gibt es eine Möglichkeit, dieses Problem zu beheben?

Code: Select all

const canvas = document.getElementById('drawing-board');
const ctx = canvas.getContext('2d');

const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;
canvas.width = window.innerWidth - canvasOffsetX;
canvas.height = window.innerHeight - canvasOffsetY;

let isPainting = true;
let lineWidth = 100;
let startX;
let startY;
const colour = "black";

ctx.strokeStyle = "black"
ctx.fillStyle= "transparent";
ctx.font = "italic bold 15pt Tahoma";
ctx.strokeText("StackOverFlow",100,240);
ctx.strokeStyle = colour;

const draw = (e) => {
if(!isPainting) {
return;
}
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';

ctx.lineTo(e.clientX - canvasOffsetX, e.clientY);
ctx.stroke();
}
canvas.addEventListener('mousedown', (e) => {
isPainting = false;
startX = e.clientX;
startY = e.clientY;
});

canvas.addEventListener('mouseup', e => {
isPainting = true;
ctx.stroke();
ctx.beginPath();
});
canvas.addEventListener('mousemove', draw);< /code>








Top