Latihan 1: Canvas API Dasar — Creative Web

Latihan 1 dari materi Canvas API Dasar di Creative Web — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Sebelum menyablon, Raka menguji dua bentuk di kertas uji. Exercise ini jalan di Worker tanpa DOM, jadi kode awal sudah membawa ctx tiruan (fillStyle, fillRect, beginPath, arc, fill). Biarkan objek itu, dan panggil perintahnya persis seperti ke canvas asli.

Persegi biru: pasang ctx.fillStyle = "#3498db", lalu ctx.fillRect(50, 50, 150, 100): pojok kiri atas di (50, 50), lebar 150, tinggi 100.
Lingkaran merah: pasang ctx.fillStyle = "#e74c3c", lalu ctx.beginPath(), ctx.arc(350, 100, 60, 0, Math.PI * 2) (pusat (350, 100), jari-jari 60, satu putaran penuh), lalu ctx.fill().
Cetak dua baris ini dengan console.log, persis dan berurutan:
1. rect: 50,50,150,100
2. circle: 350,100,60

Yang dinilai: dua baris console di atas, fillRect dengan empat argumen, arc dengan pusat, jari-jari dan sudut, kedua warna (#3498db dan #e74c3c, huruf kecil) dipasang lewat fillStyle, dan urutannya: tiap warna dipasang sebelum bentuknya tanpa warna lain di antaranya, beginPath() sebelum arc, dan fill() sesudah arc.

Hint

Kode awal sudah punya ctx tiruan. Panggil perintahnya seperti di canvas asli: pasang warnanya dulu, baru gambar bentuknya, lalu cetak dua baris ringkasan.
Persegi: ctx.fillStyle lalu ctx.fillRect(x, y, lebar, tinggi). Lingkaran: ctx.fillStyle, ctx.beginPath(), ctx.arc(x, y, jariJari, 0, Math.PI * 2), ctx.fill(). Teks console.log harus persis seperti di brief, tanpa spasi setelah koma.
ctx.fillStyle = "#3498db"; ctx.fillRect(50, 50, 150, 100); ctx.fillStyle = "#e74c3c"; ctx.beginPath(); ctx.arc(350, 100, 60, 0, Math.PI * 2); ctx.fill(); console.log("rect: 50,50,150,100"); console.log("circle: 350,100,60");

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Canvas API Dasar — Creative Web

Hint

Memperbarui Aplikasi