tRikSonic
Tema

HTML canvas Tag

Terakhir diperbarui : 28 Mei 2018 - 23.53
HTML canvas Tag - belajar html canvas , element <canvas> mempunyai definisi sebagai kanvas. element <canvas> digunakan untuk membuat grafik atau bitmap, baik berupa teks, gambar, maupun konten 2 dimensi.
background html
Dalam penerapan pada html, element <canvas> hanya berfungsi sebagai tempat atau media, sedangkan hasil yang ditampilkan dieksekusi oleh javascript.

Contoh 1 html element <canvas> :

<canvas id="canvas" width="250" height="100">
 Maaf browser anda tidak support element canvas
</canvas>

<script>
 var canvas=document.getElementById("canvas");
 var canvasku=canvas.getContext("2d");
 canvasku.font="30px Arial"; 
 canvasku.fillStyle="red";   
 var txt="Trik Sonic"
 canvasku.fillText(txt,10,50);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<canvas id="canvas" width="250" height="100">
 Maaf browser anda tidak support element canvas
</canvas>

<script>
 var canvas=document.getElementById("canvas");
 var canvasku=canvas.getContext("2d");
 canvasku.font="30px Arial"; 
 canvasku.fillStyle="red";   
 var txt="Trik Sonic"
 canvasku.fillText(txt,10,50);
</script>

</body>
</html>

Contoh 2 html element <canvas> :

<canvas style="background: #080808;" id="canvas2">
 Maaf browser anda tidak support element canvas
</canvas>

<script>
var c = document.getElementById('canvas2'),
    ctx = c.getContext('2d'),
    cw = 150,
    ch = 150;
c.width = cw;
c.height = ch;
var rand = function(a, b) {
    return ~~((Math.random() * (b - a + 1)) + a);
}
var path = [{
            x: cw / 2,
            y: (ch / 2 - 50)
        },
        {
            x: (cw / 2) - 60,
            y: (ch / 2 + 50)
        },
        {
            x: (cw / 2) + 60,
            y: (ch / 2 + 50)
        }
    ],
    particles = [],
    particleCount = 10,
    particleDelayTick = 7,
    particleDelayTickMax = 7,
    hue = rand(0, 360);
var Particle = function(path, speed) {
    this.path = path;
    this.currentPoint = 0;
    this.x = path[0].x;
    this.y = path[0].y;
    this.speed = speed;
}
var createParticles = function() {
    if (particles.length < particleCount) {
        if (particleDelayTick >= particleDelayTickMax) {
            particles.push(new Particle(path, 3));
            particleDelayTick = 0;
        } else {
            particleDelayTick++;
        }
    }
}
var updateParticles = function() {
    var i = particles.length;
    while (i--) {
        var p = particles[i];
        var onLastPoint = (p.currentPoint === p.path.length - 1);
        var nextPoint = (onLastPoint) ? 0 : p.currentPoint + 1;
        var dx = p.path[nextPoint].x - p.x;
        var dy = p.path[nextPoint].y - p.y;
        var dist = Math.sqrt(dx * dx + dy * dy);
        var vx = dx / dist * p.speed;
        var vy = dy / dist * p.speed;

        if (dist > p.speed) {
            p.x += vx;
            p.y += vy;
        } else {
            p.x = p.path[nextPoint].x;
            p.y = p.path[nextPoint].y;
            p.currentPoint = nextPoint;
        }
    }
}

var renderParticles = function() {
    ctx.fillStyle = 'hsla(' + hue + ',50%,10%,1)';
    ctx.strokeStyle = 'hsla(' + hue + ',50%,10%,1)';
    var i = particles.length;
    while (i--) {
        var p = particles[i];
        var i2 = particles.length;
        while (i2--) {
            var p2 = particles[i2];
            if (i != i2) {
                ctx.beginPath();
                ctx.moveTo(p.x, p.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.lineTo(cw / 2, ch / 2);
                ctx.stroke();
            }
        }
    }
}

var eraseIt = function() {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0, 0, 0, .4)';
    ctx.fillRect(0, 0, cw, ch);
    ctx.globalCompositeOperation = 'lighter';
}
var loopsIDidItAgain = function() {
    eraseIt();
    createParticles();
    updateParticles();
    renderParticles();
    hue = (hue < 360) ? hue + 1 : 0;
}
setInterval(loopsIDidItAgain, 16);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<canvas style="background: #080808;" id="canvas2">
 Maaf browser anda tidak support element canvas
</canvas>

<script>
var c = document.getElementById('canvas2'),
    ctx = c.getContext('2d'),
    cw = 150,
    ch = 150;
c.width = cw;
c.height = ch;
var rand = function(a, b) {
    return ~~((Math.random() * (b - a + 1)) + a);
}
var path = [{
            x: cw / 2,
            y: (ch / 2 - 50)
        },
        {
            x: (cw / 2) - 60,
            y: (ch / 2 + 50)
        },
        {
            x: (cw / 2) + 60,
            y: (ch / 2 + 50)
        }
    ],
    particles = [],
    particleCount = 10,
    particleDelayTick = 7,
    particleDelayTickMax = 7,
    hue = rand(0, 360);
var Particle = function(path, speed) {
    this.path = path;
    this.currentPoint = 0;
    this.x = path[0].x;
    this.y = path[0].y;
    this.speed = speed;
}
var createParticles = function() {
    if (particles.length < particleCount) {
        if (particleDelayTick >= particleDelayTickMax) {
            particles.push(new Particle(path, 3));
            particleDelayTick = 0;
        } else {
            particleDelayTick++;
        }
    }
}
var updateParticles = function() {
    var i = particles.length;
    while (i--) {
        var p = particles[i];
        var onLastPoint = (p.currentPoint === p.path.length - 1);
        var nextPoint = (onLastPoint) ? 0 : p.currentPoint + 1;
        var dx = p.path[nextPoint].x - p.x;
        var dy = p.path[nextPoint].y - p.y;
        var dist = Math.sqrt(dx * dx + dy * dy);
        var vx = dx / dist * p.speed;
        var vy = dy / dist * p.speed;

        if (dist > p.speed) {
            p.x += vx;
            p.y += vy;
        } else {
            p.x = p.path[nextPoint].x;
            p.y = p.path[nextPoint].y;
            p.currentPoint = nextPoint;
        }
    }
}

var renderParticles = function() {
    ctx.fillStyle = 'hsla(' + hue + ',50%,10%,1)';
    ctx.strokeStyle = 'hsla(' + hue + ',50%,10%,1)';
    var i = particles.length;
    while (i--) {
        var p = particles[i];
        var i2 = particles.length;
        while (i2--) {
            var p2 = particles[i2];
            if (i != i2) {
                ctx.beginPath();
                ctx.moveTo(p.x, p.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.lineTo(cw / 2, ch / 2);
                ctx.stroke();
            }
        }
    }
}

var eraseIt = function() {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0, 0, 0, .4)';
    ctx.fillRect(0, 0, cw, ch);
    ctx.globalCompositeOperation = 'lighter';
}
var loopsIDidItAgain = function() {
    eraseIt();
    createParticles();
    updateParticles();
    renderParticles();
    hue = (hue < 360) ? hue + 1 : 0;
}
setInterval(loopsIDidItAgain, 16);
</script>

</body>
</html>

Attributes :

Atribute html tag <canvas> :
AttributeValueDeskripsi
widthpixelsMenentukan lebar dari canvas
heightpixelsMenentukan tinggi dari canvas

Global Attributes:

Element <canvas> mencakup Global Attributes HTML.

Event Attributes:

Element <canvas> mencakup Event Attributes HTML.

Browser Support :

Desktop

ChromeYa
Safari2
Firefox1.5
Opera9
IE9
EdgeYa

Mobile

Android Webview?
Chrome Android?
Edge MobileYa
Firefox Android4
Opera Android-
iOs Safari1
Samsung Internet?

Default CSS :

Browser yang support dengan element <canvas>, biasanya mempunyai nilai default :
canvas { 
    height: 150px;
    width: 300px;
}

2 komentar

Unknown
Unknown5/24/2017ReplyBalas Komentar ini
mantap infonya gan...

My blog
Adi Jaya
Adi Jaya5/28/2018
sip bos..
Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.