Adobe Animate / HTML 5 / Multimedia · August 21, 2022

HTML 5 Canvas dan Adobe Animate 22.0 #2

image_pdf

Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis. Biasanya menggunakan pensil dan cat.Dalam pemrograman, canvas adalah elemen yang bisa digambar dengan kumpulan kode.

Canvas adalah elemen baru di HTML5 untuk menggambar (render) grafik, image, dan teks

w3schools – 21 Agustus 2022

Canvas dapat dibuat dengan tag <canvas>, jangan lupa juga untuk memberikan ukuran tinggi dan lebarnya.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Selanjutnya kita harus menggunakan DOM API untuk memanipulasi canvas, biasanya dilakukan seperti ini:

var canvas = document.getElementById("CanvasKu");
var ctx = canvas.getContext("2d");

DOM merupakan singkatan dari Document Object Model.Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek.Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface). DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG. DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain.

Fungsi document.getElementById(“CanvasKu”) untuk memilih elemen HTML dengan id “CanvasKU”. Selanjutnya variabel “ctx” (konteks) adalah objek dari canvas yang bisa kita manfaatkan untuk menggambar. Contoh kode lengkapnya:

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang dombret="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>

		<!-- canvas -->
        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>

		<!-- javascript -->
        <script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
        </script>

    </body>
</html>
Hasil Canvas Kosong Yang Siap Digambar

Sekilas tentang Adobe Animate

Adobe Animate merupakan software besutan Adobe yang baru saja dirilis secara resmi pada bulan Desember 2020 dan sekarang sudah rilis Animate pada Oktober 2021 (versi 22.0).

Software ini merupakan upgrade dari Adobe Flash CC yang kini layanannya telah dihentikan. Dilansir dari laman resminya, software ini dapat digunakan untuk membuat web interaktif dan konten mobile untuk menggunakan alat ilustrasi dan animasi yang canggih. Kamu bisa membangun lingkungan game, desain interface, hingga mengintegrasikan audio. Kamu juga bisa membuat animasi untuk augmented reality.

Untuk lebih jelas bisa membaca petunjuk tentang adobe animate lebih lengkap di https://helpx.adobe.com/animate/user-guide.html

Tags:

You may also like...