Buat Aplikasi Menggambar dengan HTML5 kanvas dan JavaScript

Tutorial ini akan membawa Anda langkah demi langkah melalui pengembangan sebuah aplikasi web sederhana dengan menggunakan gambar kanvas HTML5 dan JavaScript mitranya. Tujuan artikel ini adalah untuk mengeksplorasi proses membuat aplikasi sederhana di sepanjang jalan belajar:

Cara menggambar dinamis di atas kanvas HTML5

1. Masa depan possiblities kanvas HTML5
2. Kompatibilitas saat browser kanvas HTML5
3. Setiap langkah termasuk demo bekerja, jika Anda ingin langsung beralih:

• Sederhana Demo
• Warna Demo
• Ukuran Demo
• Alat Demo
• Garis Demo
• Lengkap Demo
• Tentukan Tujuan kami

Mari kita membuat aplikasi web di mana pengguna dinamis dapat menggambar pada kanvas HTML5. Apa yang akan pengguna kami digunakan? Sebuah buku mewarnai datang ke pikiran, yang berarti krayon. Alat pertama kami adalah krayon. Meskipun dunia nyata tidak setuju, saya pikir kita harus bisa menghapus krayon. Alat kedua kami akan menjadi penghapus (realitas maaf). Dan karena saya selalu telah menjadi Sharpie ® penggemar alat terakhir kami akan penanda.

Alat kami bisa menggunakan warna (kecuali mungkin penghapus kami). Mari kita tetap sederhana, sehingga kami memberikan pengguna kami 4 warna berbeda untuk memilih dari.

Demikian pula kita juga memberikan pengguna kami 4 ukuran yang berbeda untuk menggambar dengan, karena kita bisa. Untuk rekap app kita harus memiliki berikut ini:

• 3 alat: krayon, spidol, penghapus
• 4 warna untuk dipilih (kecuali penghapus)
• 4 ukuran untuk memilih dari

Seperti buku mewarnai, mari kita memberikan sesuatu pengguna kami untuk "warna". Aku telah memilih favorit saya: Bebek Semangka oleh Rachel Cruthirds.

Siapkan HTML5 kanvas: Markup
Kita hanya perlu garis markup; segala sesuatu yang lain akan berada dalam scripting.

Tunggu ... HTML5 masih baru dan beberapa browser (pssst. .. itu berarti Anda Internet Explorer) tidak mendukung tag kanvas, jadi mari kita gunakan baris ini markup sebagai gantinya:

Siapkan HTML5 kanvas: Scripting
Untuk mempersiapkan kanvas kita, kita akan berharap untuk menggunakan:

context = document.getElementById('canvasInAPerfectWorld').getContext("2d");

Namun IE tidak tahu apa tag kanvas berarti, dan jika kita digunakan yang di markup kami, IE akan melayani kita dengan hidangan utama dari kesalahan. Sebaliknya, kita membuat elemen kanvas dalam JavaScript dan menambahkan ke div kita disebut canvasDiv.

var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
 canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

Untuk kompatibilitas Internet Explorer kita juga harus menyertakan script tambahan: ExplorerCanvas.

Buat Menggambar "kanvas" Sederhana

Sebelum kita menambahkan opsi apapun, mari kita menangani dasar-dasar dinamis menggambar pada sebuah kanvas HTML5. Ini akan terdiri dari 4 kejadian mouse dan dua fungsi: addClick untuk merekam data mouse dan redraw yang akan menarik data tersebut.

Mouse Down Event: Bila pengguna mengklik pada kanvas kami mencatat posisi dalam array melalui fungsi addClick. Kami mengatur cat boolean true (kita akan melihat mengapa dalam detik). Akhirnya kami memperbarui kanvas dengan fungsi redraw.

$('#canvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});

Gerakan mouse Event: Sama seperti bergerak ujung penanda pada selembar kertas, kita ingin menggambar di kanvas ketika pengguna menekan kita. Cat boolean akan membiarkan kami jika penanda virtual menekan kertas atau tidak. Jika cat benar, maka kami mencatat nilai. Kemudian redraw.

$('#canvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

Mouse Up Event: Marker adalah dari kertas; boolean cat akan ingat!

$('#canvas').mouseup(function(e){
  paint = false;
});

Mouse Leave Event: Jika penanda berbunyi kertas, kemudian melupakan Anda!

$('#canvas').mouseleave(function(e){
  paint = false;
});

Berikut adalah fungsi addClick yang akan menyelamatkan posisi klik:

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

Fungsi redraw adalah dimana keajaiban terjadi. Setiap kali fungsi ini dipanggil kanvas dibersihkan dan semuanya digambar ulang. Kami bisa lebih efisien dan redraw hanya aspek-aspek tertentu yang telah berubah, tapi mari kita tetap sederhana.

Kami menetapkan sifat stroke yang sedikit untuk warna, bentuk, dan lebar. Lalu untuk setiap kali kita dicatat sebagai penanda atas kertas kita akan menarik garis.

function redraw(){
  canvas.width = canvas.width; // Clears the canvas
  
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 5;
   
  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

Menggambar sederhana kanvas Demo

Cobalah:

Clear the canvas: 

Tambahkan Warna

Mari kita memberikan pengguna kami beberapa pilihan warna. Untuk melakukannya, semua yang perlu kita lakukan adalah menambahkan mendeklarasikan beberapa variabel global dan memperbarui redraw fungsi kita.

Deklarasi variabel empat warna: colorPurple, colorGreen, colorYellow, colorBrown dengan nilai warna hex yang sesuai, sebuah variabel untuk menyimpan warna saat ini: curColor, dan sebuah array untuk mencocokkan warna yang dipilih ketika pengguna mengklik kanvas clickColor.

var colorPurple = "#cb3594";
var colorGreen = "#659b41";
var colorYellow = "#ffcf33";
var colorBrown = "#986928";

var curColor = colorPurple;
var clickColor = new Array();

Fungsi addClick perlu diperbarui untuk merekam warna yang dipilih ketika pengguna mengklik.

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  clickColor.push(curColor);
}

Karena warna dapat bervariasi saat ini, kami perlu memperbarui fungsi redraw jadi referensi warna yang aktif ketika pengguna diklik. Kami memindahkan baris tentang strokeStyle ke dalam untuk loop dan menetapkan ke nilai warna dalam clickColor array baru yang sesuai dengan clickage pengguna.

function redraw(){
  /* context.strokeStyle = "#df4b26"; */
  context.lineJoin = "round";
  context.lineWidth = 5;
   
  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      contex.moveTo(clickX[i-1], clickY[i-1]);
    }else{
      context.moveTo(clickX[i]-1, clickY[i]);
    }
    context.lineTo(clickX[i], clickY[i]);
    context.closePath();
    context.strokeStyle = clickColor[i];
    context.stroke();
  }
}

Demo Warna

Cobalah dengan pilihan warna:

• Clear the canvas: 
• Choose a color: 

Tambahkan Ukuran

Sama seperti kita menambahkan warna, mari kita tambahkan beberapa ukuran untuk memilih dari: "kecil", "normal", "besar", dan "besar".

Kami membutuhkan beberapa lebih variabel global: clickSize dan curSize.

var clickSize = new Array();
var curSize = "normal";

Fungsi addClick perlu diperbarui untuk mencatat ukuran dipilih bila pengguna mengklik.

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  clickColor.push(curColor);
  clickSize.push(curSize);

}

Update fungsi redraw untuk menangani ukuran baru.

function redraw(){
  context.lineJoin = "round";
  class="highlight delete">/* context.lineWidth = 5; */
  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
    }else{
      context.moveTo(clickX[i]-1, clickY[i]);
    }
    context.lineTo(clickX[i], clickY[i]);
    context.closePath();
    context.strokeStyle = clickColor[i];
    context.lineWidth = radius;
    context.stroke();
  }
}

Demo ukuran

Cobalah dengan berbagai ukuran:

• Clear the canvas: 
• Choose a color: 
• Choose a size: 

Tambahkan Peralatan

Krayon, Marker, Eraser. Tiga alat. Mari kita jadikan mereka.

Dua variabel global yang kita butuhkan adalah: clickTool dan curTool.

var clickTool = new Array();
var curTool = "crayon";

Fungsi addClick perlu diperbarui untuk merekam alat dipilih ketika pengguna klik.

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  if(curTool == "eraser"){
    clickColor.push("white");
  }else{
    clickColor.push(curColor);
  }
  clickColor.push(curColor);
  clickSize.push(curSize);
}

Update fungsi redraw untuk menangani alat-alat baru.

function redraw(){
  context.lineJoin = "round";
  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
    }else{
      context.moveTo(clickX[i]-1, clickY[i]);
    }
    context.lineTo(clickX[i], clickY[i]);
    context.closePath();
    context.strokeStyle = clickColor[i];
    context.lineWidth = radius;
    context.stroke();
  }
  if(curTool == "crayon") {
    context.globalAlpha = 0.4;
    context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
  }
  context.globalAlpha = 1;
}

Demo Peralatan

Cobalah dengan alat yang berbeda:

• Clear the canvas: 
• Choose a color: 
• Choose a size: 
• Choose a tool: 

Tambahkan Outline

Buku mewarnai memberikan garis besar sesuatu untuk warna: anak anjing lucu atau kelinci melompat. Saya memilih bebek semangka.

Pertama mendeklarasikan outlineImage variabel.

var outlineImage = new Image();

Memuat gambar outline.

function prepareCanvas(){
  ...
  
  outlineImage.src = "images/watermelon-duck-outline.png";
}

Update fungsi redraw untuk menarik gambar garis besar menggunakan metode drawImage konteks kanvas itu. Parameternya adalah objek gambar yang kita dimuat, posisi kita ingin menggambar gambar, dan dimensi gambar.

function redraw(){
  ...
  
  context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
}

Demo Garis Besar

Berikan coba:

• Clear the canvas: 
• Choose a color: 
• Choose a size: 
• Choose a tool: 

Akhir Rincian

Kita hampir sampai! Rincian ini terakhir adalah opsional: membatasi area gambar untuk persegi panjang di kanvas dan menggunakan sisa kanvas untuk gui kita (alias tombol).

Mari kita menutupi kanvas sehingga semua gambar adalah dalam area gambar. Kami menggunakan metode klip dengan menyimpan dan mengembalikan metode. Metode ini saat ini tidak didukung oleh Internet Explorer.

function redraw()
{
  ...
  
  context.save();
  context.beginPath();
  context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
  context.clip();
  
  var radius;
  var i = 0;
  for(; i < clickX.length; i++)
  {
    ... 
  }
  context.restore();
  ...
} // end redraw function

Yang terakhir adalah untuk memindahkan semua tombol-tombol di atas kanvas kami. Ini melibatkan memuat gambar dan menampilkan mereka berdasarkan interaksi pengguna kami. Saya menggunakan teknik standar JavaScript jadi saya tidak akan membuat Anda bosan dengan rincian (tapi itu termasuk dalam kode sumber jika Anda tertarik). Dan di sana Anda memilikinya!

Lengkap Demo

Sekarang kita telah menciptakan sebuah aplikasi HTML5 kanvas menggambar, mari kita istirahat dan membuat gambar!

Complete Demo

Now that we have created an HTML5 canvas drawing app, lets take a break and draw!

Download Source Code

• Download HTML5 Canvas Drawing App (zip format): html5-canvas-drawing-app.zip
• Download Newer Versions: github.com/williammalone/Simple-HTML5-Drawing-App

Related Articles

• http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ 
• HTML5 Game Character
• HTML5 Canvas Paint Bucket
• HTML5 Canvas Example