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.
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> :| Attribute | Value | Deskripsi |
|---|---|---|
width | pixels | Menentukan lebar dari canvas |
height | pixels | Menentukan tinggi dari canvas |
Global Attributes:
Element
<canvas> mencakup Global Attributes HTML.
Event Attributes:
Element
<canvas> mencakup Event Attributes HTML.
Browser Support :
Desktop
| Chrome | Ya |
|---|---|
| Safari | 2 |
| Firefox | 1.5 |
| Opera | 9 |
| IE | 9 |
| Edge | Ya |
Mobile
| Android Webview | ? |
|---|---|
| Chrome Android | ? |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | - |
| iOs Safari | 1 |
| Samsung Internet | ? |
Default CSS :
Browser yang support dengan element
<canvas>, biasanya mempunyai nilai default :canvas {
height: 150px;
width: 300px;
}
My blog