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