Witam,
Mam problem dotyczący JS'owego canvasa, Nie wiem w jaki sposób mogę wypełnić obiekt tak zwanej szklanki.
Szklankę stworzyłem ale nie działa mi to :/ Nie wiem czemu, próbowałem wiele razy za pomocą clipa, save, restore ale albo rysuje sie sama szklanka albo fale.
Szukalem po google ale nie działa, i żaden sposób który probowalem też nie :/
Chce po prostu zrobic cos takiego ze bede mogl wpisac liczbe procentow ktora ma byc wypelniona szklanka i sie wypelnia powoli do tych proecentow.
Tutaj mój aktualny kod (posiada duzo roznych komentarzy bo porobowalem to naprawic ale nie wychodzilo):
const canvas = document.getElementById('cupCanvas');
const ctx = canvas.getContext('2d');
let currentCup = null;
const fillTheCup = () => {
}
const animateFill = () => {
// ctx.save();
ctx.lineWidth = 5;
let c = new Cup();
ctx.save()
// ctx.clip();
c._fill();
// ctx.stroke();
ctx.restore();
// ctx.restore();
// ctx.stroke()
// console.log(ctx.clip());
// ctx.clip();
// ctx.
// c._fill();
// ctx.stroke();
// ctx.restore();
// ctx.fill();
}
const createTheCup = () => {
animateFill();
// animateFill();
// currentCup = new Cup();
// currentCup._fill();
// currentCup.animateFill();
}
class Cup {
constructor() {
this.x = 50;
this.y = 10;
this.width = 50;
this.height = 90;
ctx.lineCap = "round";
this._create();
this.animationY = this.y;
// this.animateFill();
}
animateFill() {
ctx.clip()
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
_fill() {
ctx.beginPath();
ctx.moveTo(0, this.y);
for (var x = 0; x < this.x + this.width * 2; x += 20) {
ctx.quadraticCurveTo(x + 10, this.y + 15, x + 20, this.y);
}
ctx.lineTo(this.x + this.width * 2.2, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
// ctx.clip();
ctx.stroke();
// console.log("ok")
ctx.strokeStyle = `#0092f9`;
ctx.fillStyle = `#0092f9`;
ctx.fill();
}
_create() {
// ctx.save();
// ctx.clip();
ctx.lineWidth = 5;
ctx.beginPath();
// pierwsza scianka
ctx.moveTo(50, 100);
ctx.lineTo(20, 10);
// lacznik
ctx.moveTo(49, 100);
ctx.lineWidth = 7;
ctx.lineTo(50, 100);
// podstawa
ctx.lineWidth = 5;
ctx.moveTo(50, 100);
ctx.lineTo(100, 100);
// lacznik v2
ctx.moveTo(99, 100);
ctx.lineWidth = 7;
ctx.lineTo(101, 100);
ctx.lineWidth = 5;
// druga scianka
ctx.moveTo(100, 100);
ctx.lineTo(135, 10);
// dach
ctx.moveTo(137, 10);
ctx.lineTo(18, 10);
ctx.clip();
ctx.closePath();
ctx.stroke();
// ctx.save();
// ctx.clip();
// ctx.rect(10, 10, 50, 50);
// this._fill();
// ctx.restore();
// ctx.restore();
}
}
Dzieki za jakąkolwiek pomoc :)
Pozdrawiam.
Mondonno.
szatkusthis.yi odrysowujszatkus