Hay, Sobat dumay. kali ini saya akan membagikan salah satu ilmu multimedia terbaru dan pastinya tidak dimiliki oleh blogger lain.
ilmu tersebut adalah cara membuat gambar curva berbentuk pelangi dengan script HTML.
ilmu ini saya dapatkan pada saat saya diberikan tugas oleh dosen saya, dengan membuat gambar curva yang berbentuk sesuatu yang berada di kehidupan nyata. yah saya berfikir kenapa tidak saya membuat gambar pelangi, dan dihiasi dengan matahari dan awan.
teknik menggambar sebenarnya dapat dilakukan dengan tools yang ada tinggal drop and drag. namun seorang mutimediawan sejati itu nggak gaul kalau tidak tahu cara buat gambar pakai script HTML.
saya cerita sedikit elemen - elemen yang berada pada gambar tersebut.
- untuk gambar mataharinya, saya menggabungkan lingkaran, garis dan kurva.
- untuk gambar awan, saya menggunakan kotak (dari garis yang di perbesar sizenya) dan sejumlah lingkaran.
- untuk pelanginya sendiri, saya hanya menggunakan elemen kurva saja dengan memperbesar sizenya.
Cara pembuatannya cukup mudah, anda siapkan tool untuk edit script HTML yang terkenal yaitu notpad++. jika belum punya silahkan download. dan yang pastinya browser, untuk melihat hasil dari yang anda buat nantinya. browser yang di pakai terserah, bisa menggunakan crome, firefox, atau bawaan windows tidak apa - apa. langsung ke akar permasalahan :
Pertama : anda buka software notpad++nya. setelah terbuka, copy script dibawah ini untuk membuat canvas tempat menggambar.
<body bgcolor="gray">
<center>
<canvas id="myCanvas" width="1500" height="700"></canvas>
<style>
canvas {border: 2px solid black; background-color:blue;}
</style>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
</script>
</center>
</body>
Setelah anda membuat canvas, pertama yang kita buat adalah matahari. copy script dibawah ini sebelum </script>.
//matahari
context.beginPath();
context.moveTo(10, 160);
context.lineTo(80, 160);
context.lineWidth = 20;
context.strokeStyle = 'yellow';
context.lineCap = 'butt';
context.stroke();
context.beginPath();
context.moveTo(250, 160);
context.lineTo(320, 160);
context.lineWidth = 20;
context.strokeStyle = 'yellow';
context.lineCap = 'butt';
context.stroke();
context.beginPath();
context.moveTo(167, 10);
context.lineTo(167, 80);
context.lineWidth = 20;
context.strokeStyle = 'yellow';
context.lineCap = 'butt';
context.stroke();
context.beginPath();
context.moveTo(167, 245);
context.lineTo(167, 315);
context.lineWidth = 20;
context.strokeStyle = 'yellow';
context.lineCap = 'butt';
context.stroke();
context.beginPath();
context.moveTo(110, 220);
context.lineTo(45, 280);
context.lineWidth = 20;
context.strokeStyle = 'yellow';
context.lineCap = 'butt';
context.stroke();
context.beginPath();
context.moveTo(290, 40);
context.lineTo(230, 100);
context.lineWidth = 20;
context.strokeStyle = 'yellow';
context.lineCap = 'butt';
context.stroke();
context.beginPath();
context.moveTo(30, 50);
context.lineTo(100,105);
context.lineWidth = 20;
context.strokeStyle = 'yellow';
context.lineCap = 'butt';
context.stroke();
context.beginPath();
context.moveTo(230, 215);
context.lineTo(290, 260);
context.lineWidth = 20;
context.strokeStyle = 'yellow';
context.lineCap = 'butt';
context.stroke();
var centerX = canvas.width / 9;
var centerY = canvas.height / 4.3;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//mata n mulut matahari
var centerX = canvas.width / 10;
var centerY = canvas.height / 4.8;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 0;
context.strokeStyle = "black";
context.stroke();
var centerX = canvas.width / 8;
var centerY = canvas.height / 4.8;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 0;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(130, 180);
context.bezierCurveTo(150, 230, 215, 190, 200, 180);
context.lineWidth=10;
context.strokeStyle='black';
context.stroke();
Apabila sudah membuat mataharinya, kita akan membuat pelanginya terlebih dahulu. kenapa pelangi terlebih dulu kita buat daripada awan. alasannya simple, karena ujung pelangi akan ditutup oleh awan. apabila awan yang kita buat dahulu, pelangi akan menutupi awan dan ini kita tidak inginkan. copy script ini dibawah script matahari untuk membuat pelangi.
//pelangi
context.beginPath();
context.moveTo(1100, 400);
context.bezierCurveTo(790, 200, 800, 140, 500, 400);
context.lineWidth=30;
context.strokeStyle='purple';
context.stroke();
context.beginPath();
context.moveTo(1130, 390);
context.bezierCurveTo(770, 120, 750, 150, 470, 390);
context.lineWidth=30;
context.strokeStyle='Darkblue';
context.stroke();
context.beginPath();
context.moveTo(1150, 380);
context.bezierCurveTo(770, 60, 700, 150, 440, 380);
context.lineWidth=30;
context.strokeStyle='Lawngreen';
context.stroke();
context.beginPath();
context.moveTo(1195, 380);
context.bezierCurveTo(750, 0, 660, 150, 400, 380);
context.lineWidth=30;
context.strokeStyle='yellow';
context.stroke();
context.beginPath();
context.moveTo(1242, 380);
context.bezierCurveTo(710, -60, 640, 150, 360, 380);
context.lineWidth=30;
context.strokeStyle='Gold';
context.stroke();
context.beginPath();
context.moveTo(1280, 380);
context.bezierCurveTo(710, -130, 600, 150, 320, 380);
context.lineWidth=30;
context.strokeStyle='red';
context.stroke();
sampai disini kita telah berhasil membuat matahari dan pelangi. langkah terakhir kita akan membuat awan - awan agar terlihat lebih sempurna. copy scriptnya dibawah script pelangi tadi.
//awan1
context.beginPath();
context.moveTo(300, 380);
context.lineTo(560, 400);
context.lineWidth = 90;
context.strokeStyle = 'white';
context.lineCap = 'butt';
context.stroke();
var centerX = canvas.width / 4.5;
var centerY = canvas.height / 2;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 4.7;
var centerY = canvas.height / 1.8;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 4.5;
var centerY = canvas.height / 1.6;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 4;
var centerY = canvas.height / 1.6;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 3.5;
var centerY = canvas.height / 1.5;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 3.2;
var centerY = canvas.height / 1.5;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 2.8;
var centerY = canvas.height / 1.5;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 2.6;
var centerY = canvas.height / 1.7;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 2.6;
var centerY = canvas.height / 1.9;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 2.8;
var centerY = canvas.height / 1.9;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 3;
var centerY = canvas.height / 2;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 3.3;
var centerY = canvas.height / 2;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 3.6;
var centerY = canvas.height / 2;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
//awan2
context.beginPath();
context.moveTo(1030, 410);
context.lineTo(1270, 390);
context.lineWidth = 90;
context.strokeStyle = 'white';
context.lineCap = 'butt';
context.stroke();
var centerX = canvas.width / 1.45;
var centerY = canvas.height / 1.8;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.45;
var centerY = canvas.height / 1.6;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.40;
var centerY = canvas.height / 1.6;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.32;
var centerY = canvas.height / 1.6;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.27;
var centerY = canvas.height / 1.5;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.2;
var centerY = canvas.height / 1.58;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.18;
var centerY = canvas.height / 1.7;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.18;
var centerY = canvas.height / 1.8;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.2;
var centerY = canvas.height / 1.9;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.26;
var centerY = canvas.height / 1.9;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.3;
var centerY = canvas.height / 1.9;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
var centerX = canvas.width / 1.36;
var centerY = canvas.height / 1.9;
var radius = 40;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
Silahkan anda simpan file tersebut dengan nama sesuai keinginan anda dengan ekstensi .html. silahkan anda coba buka file yang anda simpan tersebut menggunakan browser anda.
Selamat anda telah berhasil membuat gambar curva dengan script HTML. cara ini berguna buat memenuhi tugas multimedia anda. semoga bermanfaat...
Tidak ada komentar:
Posting Komentar