Как реализовать Canvas?
Насобирал разного...
Окно получил.
<canvas id="canvas" width="200" height="200"></canvas>
в SS параграф дописал
Canvas {border: 5px solid green;} / 5 -толщина стенок, грин - цвет
использовал внешний скрипт
script("script.js"); // ниже он //
const canvas = document.getElementById("signatureCanvas");
const ctx = canvas.getContext("2d");
let isDrawing = false;
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
document.getElementById("saveButton").addEventListener("click", saveSignature);
document.getElementById("clearButton").addEventListener("click", clearSignature);
function clearSignature(e) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function startDrawing(e) {
isDrawing = true;
draw(e);
}
function draw(e) {
if (!isDrawing) return;
ctx.lineWidth = 4;
ctx.lineCap = "round";
ctx.strokeStyle = "red";
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
function stopDrawing() {
isDrawing = false;
ctx.beginPath();
}
function saveSignature() {
const link = document.createElement("a");
link.download = "signature.png";
link.href = canvas.toDataURL("image/png");
link.click();
}
Этот код не получилось в параграф вставить.
На этом застрял.
Если брать пакет запуск в браузере
через
index.html
script. js
styles.css
Без конструктора Ахма, то всё работает.
А интегрировать не получается.
А если попробовать создавать канвас так:
const canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
const parent = document.getElementById("print"); // можно в разные места вставлять
parent.append(canvas);
Спасибо!
Сразу не получилось.
А тут утром проснулся и всё сложилось сразу.
Попозже выложу пример готовый.
Застрял. :(
Параграф запускает Канвас рисует. Всё идеально.
Выходим из параграфа заходим Канвас нет.
Повторно не запускает в этом же параграфе.
Так же не получается запустить Канвас в другом параграфе этот же скрипт. Повторный вариант.
И не могу понять как сделать второй Канвас с другими характеристиками.
Могу предположить, что надо стирание запущенного скрипта на входе в следующий параграф.
Но чем стирать не нашёл. :(
Как то сделал, чтоб работало на компе и рисовалось мышкой.
Но на сотовом не рисует пальцем.
Еще момент, если Конвас находится по размерам за пределами экрана:
(Масштаб параграфа больше)
Часть Конваса на экране - рисует только в верхней части Конваса
Сдвиг вниз ползунка, чтоб получить весь Конвас, вообще перестаёт рисовать. До тех пор пока не вернётся на верх экрана.
+++++++++
Этот вариант работает на компе.
На сотовом не хочет рисовать пальцем.
https://kypilkimen.ru/Tes/tes.html
+++++
Если Канвас ниже экрана, то рисует только верх. Смещение экрана. Тоже не рисует низ.
Это как правильно должно быть?
Я так понял, что нужен код сенсорных событий для реализации использования Конваса на планшете, смартфоне.
Наступил на грабли 10 летней давности....:(
В конечном итоге окажется, что необходимо изменение размеров окна Конваса, для более благоприятного использования этого окна на смартфоне.