Ditambahkan di HTML5, elemen HTML <canvas>
dapat digunakan untuk menggambar grafik melalui skrip di JavaScript. Sebagai contoh, dapat digunakan untuk menggambar graf, membuat komposisi foto, mencipta animasi, atau bahkan melakukan pemrosesan atau rendering video secara waktu-nyata .
Aplikasi Mozilla mendapat dukungan untuk <canvas>
sejak Gecko 1.8 (i.e. Firefox 1.5). Elemen tersebut semula dikenalkan oleh Apple untuk Dashboard OS X dan Safari. Internet Explorer mendukung <canvas>
sejak versi 9 dan seterusnya; untuk versi awal IE, sebuah halaman dapat secara efektif mendukung <canvas>
dengan memasukkan skrip dari proyek Explorer Canvas Google. Google Chrome dan Opera 9 juga mendukung <canvas>
.
Elemen <canvas>
juga digunakan oleh WebGL untuk menggambar grafik hardware-accelerated 3D di halaman web.
Contoh
Ini hanya cuplikan kode sederhana yang menggunakan metode CanvasRenderingContext2D.fillRect()
.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
Edit kode di bawah dan lihat perbaruan perubahannya di kanvas secara waktu-nyata:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);</textarea>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
Reference
The interfaces related to the WebGLRenderingContext
are referenced under WebGL.
CanvasCaptureMediaStream
is related.
Petunjuk dan tutorial
- Tutorial canvas
- Tutorial komprehensif mengcakup penggunaan sederhana
<canvas>
dan fitur lanjutannya. - Cuplikan kode: Canvas
- Beberapa cuplikan kode pengembang berorientasi ekstensi yang melibatkan
<canvas>
. - Demo: ray-caster sederhana
- Demo animasi ray-tracing menggunakan canvas.
- Menggambar DOM objects ke canvas
- Bagaimana menggambar konten DOM, seperti elemen HTML, pada canvas.
- Memanipulasi video dengan canvas
- Menggabungkan
<video>
dan<canvas>
untuk memanipulasi data video secara real time.
Sumber
Generik
Librari
- Fabric.js is an open-source canvas library with SVG parsing capabilities.
- Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications.
- Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
- Origami.js is an open source lightweight canvas library.
- libCanvas is powerful and lightweight canvas framework.
- p5.js has a full set of canvas drawing functionality for artists, designers, educators and beginners.
- Processing.js is a port of the Processing visualization language.
- PlayCanvas is an open source game engine.
- Pixi.js adalah enjine permainan open source.
- PlotKit adalah librari charting dan grafik.
- Rekapi is an animation key-framing API for Canvas.
- PhiloGL is a WebGL framework for data visualization, creative coding and game development.
- JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
- EaselJS is a free/open source library to make it easier to use canvas for games and art
- Scrawl-canvas is another open-source javascript library for creating and manipulating 2d canvas elements
- heatmap.js is an open source library to create canvas based heatmaps
- The ZIM framework provides conveniences, components and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.
Spesifikasi
Spesifikasi | Status | Komentar |
---|---|---|
HTML Living Standard The definition of '<canvas>' in that specification. |
Living Standard |