Begini urutannya
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.strokeStyle = '#000000'; // Warna
ctx.lineWidth = 1; // Ketebalan garis 5px
ctx.lineJoin = "round";
ctx.beginPath();
ctx.arc(xo, yo, rr, sdtRad1, sdtRad2);
ctx.closePath();
ctx.fillStyle = '#ffff00';
ctx.fill();
ctx.stroke();
beginpath dan closepath kemudian baru fill.
Kebutuhan hanya lingkaran yang bisa di klik. Dan ternyata bisa menggunakan clip-path circle: Gunakan pada css :
.myCanvas {
position: absolute;
cursor: pointer;
clip-path: circle(100px at 420px 186px);
user-select: none;
-webkit-user-select: none;
}
catatan, clip-path: circle(jari-jari at xpusat ypusat);
Kemarin kebingungan kenapa semua garis berubah jadi putus-putus semua. Ternyata setelah di matikan closePath() hal tersebut tidak terjadi. Kesimpulan saat ini adalah closePath tidak dipakai ketika hanya sebuah garis putus.
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(x0, y0-dy);
ctx.lineTo(x0, y0+dy);
ctx.lineWidth = 2; // Ketebalan garis
ctx.strokeStyle = '#FF0000'; // Warna
//ctx.closePath();
ctx.stroke();
Kucoba membuat animasi rotasi di javascript. Ini dia :
function mcAnimateRotate(mc){
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
var sdt = Math.min(elapsed / duration * 180 , 180);
mc.style.transform = "rotate("+sdt+"deg)";
if (elapsed < duration) {
requestAnimationFrame(animate);
} else {
// jika selesai
}
}
let startTime = null;// perlu di null kan lagi setiap mau di animasi kan
const duration = 1500; // Durasi 0.5 detik dalam milidetik
requestAnimationFrame(animate);
}
Mencoba mengefisienkan drag drop beberapa tujuan.
Saya menggunakan array.
seperti ini :
var arbox = [];
for(var i=0;i<=5;i++){
arbox.push([arDrop[i], xydrop[i][0], xydrop[i][1], [] ]);
}
jadi si arDrop itu adalah tujuannya.
xydrop adalah nilai x dan y si arDrop
dan [] terakhir di isi dengan btn yang masuk.
kemudian ketika memasukkan btn ke drop saya gunakan ini :
if(el.ff){
arbox[el.j][3].push(el);
if(arbox[el.j][3].length==2){
var btnBack = arbox[el.j][3][0];
arbox[el.j][3].splice(0, 1);
btnBack.style.left = ""+ btnBack.x0 + "px";
btnBack.style.top = ""+ btnBack.y0 + "px";
btnBack.j = -1;
}
arbox[el.j][3][0].style.left = ""+arbox[el.j][1] + "px";
arbox[el.j][3][0].style.top = ""+arbox[el.j][2] + "px";
CekDrop();
}
jadi, ada kemungkinan 2 buah btn dalam 1 buah drop. sehingga perlu di geser yang pertama ke posisi x0 y0 nya dan baru memasukkan btn aktif ke drop.
saya gunakan splice, ambil di posisi array pertama setelah push array. Jadi si array isinya tetap satu btn.
Ketika ingin menghilangkan fungsi yang menempel di tombol, ternyata bisa menggunakan abort. Masukkan signal: controller.signal di dalan addEventListener.
Begini caranya :
const controller = new AbortController();
mybtn.addEventListener('mousedown', dragMouseDown,{ signal: controller.signal });
mybtn.addEventListener('touchstart', dragMouseDown, { signal: controller.signal } ,{ passive: false });
Cara memanggilnya
controller.abort();
setelah dipanggil, seperti removeEventListener, yaitu menghilangkan addEventListener.
Ketika sedang menbuat interaktif, muncul pertanyaan, apakah innerHTML bisa di edit sebagai inputan?
Googling lah. Ternyata bisa.
Caranya :
document.getElementById("myDiv").contentEditable = "true"; << bisa edit teks di div sebagai inputan
document.getElementById("myDiv").contentEditable = "false"; << menonaktifkan edit
bisa juga di taruh ketika membuat div
<div class="textbox" id="textbox" contenteditable="true"></div>
Ternyata penulisan ketika di Javascript dan di HTML berbeda di huruf "e" saja. editable dan Editable. Sempet salah tadi, kirain sama kecil semua, ternyata tidak.
doGet adalah untuk menjalankan file utama index.html (atau beranda.html, atau lainnya)
include adalah untuk menjalankan file html yang di dalamnya bisa ditulis <script></script> atau <style></style>
getScriptUrl adalah untuk mendapatkan url dari file yang aktif, yang fungsinya bisa ditempel namafile.html dan dijalankan (?page=Beranda)