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

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

Post by Guest »

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>







Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post