Berikut catatan ketika belajar kode Canvas API Murni, library P5.js, dan library Konva.js untuk menampilkan obyek yang sama persis. Obyek ini berupa kota merah dengan ukuran kanvas 360px `x` 360px. Catatan di sini hanya untuk pembelajaran ketika ingin membuat obyek statis 2D yang ditampilkan dalam laman weblog.
Visual contoh yang digunakan dalam postingan ini menggunakan Canvas API murni yang menghasilkan visual sama untuk untuk library p5.js, dan konva.js.
Kode di bawah ini dapat disalin untuk disimpan sebagai file html
Kode dengan Canvas API murni:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="360" height="360"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Background abu-abu
ctx.fillStyle = '#dddddd';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Rectangle merah
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 50, 50);
</script>
</body>
</html>Kode dengan library p5.js:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(360, 360);
}
function draw() {
background(220); // Warna latar abu-abu
fill('red'); // Warna isi merah
noStroke(); // Tidak ada outline
rect(100, 100, 50, 50); // (x, y, width, height)
}
</script>
</body>
</html>Kode dengan library Konva.js:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@8.3.2/konva.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
const stage = new Konva.Stage({
container: 'container',
width: 360,
height: 360,
});
const bgLayer = new Konva.Layer();
const background = new Konva.Rect({
x: 0,
y: 0,
width: 360,
height: 360,
fill: '#dddddd',
});
bgLayer.add(background);
stage.add(bgLayer);
// Layer untuk objek utama
const layer = new Konva.Layer();
const rect = new Konva.Rect({
x: 100,
y: 100,
width: 50,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 0,
});
layer.add(rect);
stage.add(layer);
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar