[javascript] Me-rotasi gambar menggunakan elemen canvas

Krisnanda — Mon, 21 Jul 2008 12:19:50 +0000

Element CANVAS atau tag canvas di keluarga HTML bisa di katakan anggota baru, berguna untuk menggambar grafik menggunakan javascript.

Tag

Pada postingan berikut ini akan menjelaskan tentang bagaimana menggunakan element canvas untuk merotasi sebuah gambar, rotasi pada 90, 180, -90, dan kembali ke 0.

Contoh nya :

rotate:

Dan berikut ini script lengkap nya :

rotasi.js

if(document.getElementById(‘canvas’)) {
/*
Ok!: Firefox 2, Safari 3, Opera 9.5b2
No: Opera 9.27
*/
var image = document.getElementById(‘image’);
var canvas = document.getElementById(‘canvas’);
var canvasContext = canvas.getContext(‘2d’);

switch(p_deg) {
default :
case 0 :
canvas.setAttribute(‘width’, image.width);
canvas.setAttribute(‘height’, image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, 0);
break;
case 90 :
canvas.setAttribute(‘width’, image.height);
canvas.setAttribute(‘height’, image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, -image.height);
break;
case 180 :
canvas.setAttribute(‘width’, image.width);
canvas.setAttribute(‘height’, image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, -image.height);
break;
case 270 :
case -90 :
canvas.setAttribute(‘width’, image.height);
canvas.setAttribute(‘height’, image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, 0);
break;
};

} else {
/*
Ok!: MSIE 6 et 7
*/
var image = document.getElementById(‘image’);
switch(p_deg) {
default :
case 0 :
image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=0)’;
break;
case 90 :
image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=1)’;
break;
case 180 :
image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=2)’;
break;
case 270 :
case -90 :
image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=3)’;
break;
};

};
};

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(function() {
var image = document.getElementById(‘image’);
var canvas = document.getElementById(‘canvas’);
if(canvas.getContext) {
image.style.visibility = ‘hidden’;
image.style.position = ‘absolute’;
} else {
canvas.parentNode.removeChild(canvas);
};

rotate(0);
});

html nya :

rotate:

Refrensi :

http://www.w3schools.com/

http://javascript.internet.com/

Menambah Javascript pada Javascript Suatu ketika ketika saya sedang ngoding web, saya menghadapi keadaan...
[Javascript] Validasi dalam javascript Awalnya saya bingung bagaimana melakukan proses validasi suatu radio button...
Mendapatkan value dari Window pop up pada HTML Berikut ini tips untuk mendapatkan nilai dari window pop up,...

[CSS] Membuat Master Stylesheet

Krisnanda — Fri, 09 May 2008 05:55:46 +0000

Master stylesheet (baca: stylesheet utama) menjadi stylesheet yang pertama kali di panggil pada web yang kita buat.
Tujuan kita menggunakan master stylesheet ini adalah untuk mengganti settingan dasar yang ada pada browser.
Berikut ini master stylesheet yang sering saya gunakan:

Global Defaults

Master stylesheet di mulai dari mengkosongkan margin, padding, dan border pada halaman.

html, body {
margin: 0px;
padding: 0px;
border: 0px;
}

Selanjutnya kita buat settingan tulisan (font).
Pastikan kita menggunakan nama-nama pada font-family yang sudah standar di OS Macintosh dan Windows.
Pastikan pula ukuran tulisan nya 100% atau 1em.

body {
font: 1em/1.25 Arial, Helvetica, sans-serif;
}

Format Headline

Headline atau tag header (H1, H2, H3, dst) secara umum default nya adalah huruf tebal dengan margin yang besar. Untuk itu kita standarisasikan headline tersebut dengan mengkosongkan weight, margins, dan padding.

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

Format Plain Text

Setelah headlines, selanjutnya ada bebereapa tag yang kan di setting.

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {
margin: 0;
padding: 0;
font: normal normal normal 1em/1.25 Arial, Helvetica, sans-serif;
}

blockquote {
margin: 1.25em;
padding: 1.25em
}

q {
font-style: italic;
}

acronym, abbr {
cursor: help;
border-bottom: 1px dashed;
}

small {
font-size:.85em;
}

big {
font-size:1.2em;
}

Links and Images

a, a:link, a:visited, a:active, a:hover {
text-decoration: underline;
}

img {
border: none;
}

Tables

table {
margin: 0;
padding: 0;
border: none;
}

Forms

form {
margin: 0;
padding: 0;
display: inline;
}

label {
cursor: pointer;
}

Class-class pendukung

.clear { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.textJustify { text-align: justify; }
.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.noindent { margin-left: 0; padding-left: 0; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }
.nobullet { list-style: none; list-style-image: none; }

Print halaman web tanpa header & footer Mungkin kita sudah pada tahu, jika kita ingin nge-print lewat...
[Delphi] Virtual Key Codes Virtual Key Codes adalah kode hexa pada kibor ketika di...
Bubble Tooltips Bubble Tooltips are an easy way to add (via a...

The Riddle » About.com

[javascript] Me-rotasi gambar menggunakan elemen canvas

[CSS] Membuat Master Stylesheet