Diskuze: Pohyb obrázku Canvas
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Peter Mlich:6.1.2020 14:48
Editováno
Dekuji, ze jsi zverejnil kod. (ironie)
Takze tve auto je v garazi a jen tak na chodniku kecas s mechanikem a ptas se
ho, co je asi rozbite. Co ti asi poradi? A ted ti tu budeme psat 100 dalsich
zprav, aby jsme to z tebe vytahli. Myslis? 
1. V canvasu se tusim dela animace tak, ze ho cely smazes a vse prekreslis
znova. Nebo je mozne nakreslit 2 canvasy pres sebe. Do jednoho das pozadi a na
druhy kreslis nove objekty. (css position) Na to mazani a animaci lze najit
priklady googlem.
google = js canvas animace
google = js canvas image animation
https://developer.mozilla.org/…c_animations
// animovane hodiny
function clock() {
var now = new Date();
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
ctx.clearRect(0, 0, 150, 150);
ctx.translate(75, 75);
ctx.scale(0.4, 0.4);
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';
ctx.lineWidth = 8;
ctx.lineCap = 'round';
// Hour marks
ctx.save();
for (var i = 0; i < 12; i++) {
ctx.beginPath();
ctx.rotate(Math.PI / 6);
ctx.moveTo(100, 0);
ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.restore();
// Minute marks
ctx.save();
ctx.lineWidth = 5;
for (i = 0; i < 60; i++) {
if (i % 5!= 0) {
ctx.beginPath();
ctx.moveTo(117, 0);
ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.rotate(Math.PI / 30);
}
ctx.restore();
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr >= 12 ? hr - 12 : hr;
ctx.fillStyle = 'black';
// write Hours
ctx.save();
ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(-20, 0);
ctx.lineTo(80, 0);
ctx.stroke();
ctx.restore();
// write Minutes
ctx.save();
ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-28, 0);
ctx.lineTo(112, 0);
ctx.stroke();
ctx.restore();
// Write seconds
ctx.save();
ctx.rotate(sec * Math.PI / 30);
ctx.strokeStyle = '#D40000';
ctx.fillStyle = '#D40000';
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30, 0);
ctx.lineTo(83, 0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
ctx.stroke();
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2';
ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
ctx.stroke();
ctx.restore();
window.requestAnimationFrame(clock);
}
window.requestAnimationFrame(clock);2.
x = x + 1 // pohyb v ose x
y = y + 1 // pohyb v ose y
// pohyb do kruhu - nebo tak nejak
x = Sx + r * Math.cos(uhel)
y = Sy + r * Math.sin(uhel)
uhel = stupne / (2 * Math.PI)
// pohyb do elipsy
x = Sx + r1 * Math.cos(uhel)
y = Sy + r2 * Math.sin(uhel)Co vas v te matice uci?
Zobrazeno 3 zpráv z 3.