Saya ingin menggambar di Kanvas HTML menggunakan mouse (mis: menggambar tanda tangan, menggambar nama, ...)
Tolong bantu saya bagaimana saya bisa melakukannya? Tolong berikan beberapa kode sumber. Terima kasih
html
canvas
gesture-recognition
gestures
MartinJoo
sumber
sumber
Jawaban:
Berikut adalah contoh yang berfungsi.
sumber
canvas.offsetLeft;
dancanvas.offsetTop;
dengancanvas.getBoundingClientRect().left;
dancanvas.getBoundingClientRect().top;
masing - masing untuk memperbaiki masalah pengguliran.touchmove
,touchstart
,touchend
Dan kemudianclientX
berasal darie.touches["0"].clientX
dalamfindxy()
kode, belum memikirkan cara mudah untuk mendeteksi apa yang sedang digunakan meskipun, karena Anda tidak dapat mendengarkan kedua peristiwa pada waktu yang sama dari apa yang saya diuji. Aku pergimouseout
apa adanya. Ini tidak sempurna, tetapi berhasilBerikut cara paling mudah untuk membuat aplikasi menggambar dengan kanvas:
mousedown
,mousemove
danmouseup
pendengar acara untuk DOM kanvasmousedown
, dapatkan koordinat mouse, dan gunakanmoveTo()
metode untuk memposisikan kursor gambar Anda danbeginPath()
metode untuk memulai jalur gambar baru.mousemove
, terus tambahkan titik baru ke jalur denganlineTo()
, dan warnai segmen terakhir denganstroke()
.mouseup
, setel bendera untuk menonaktifkan gambar.Dari sana, Anda dapat menambahkan semua jenis fitur lain seperti memberi pengguna kemampuan untuk memilih ketebalan garis, warna, sapuan kuas, dan bahkan lapisan.
sumber
Saya pikir, contoh lain di sini terlalu rumit. Yang ini lebih sederhana dan hanya JS ...
sumber
if (e.buttons !== 1) return;
;-).resize
fungsi saya . Saya mengatur lebar dan tinggi kanvas berdasarkan ukuran jendela. Anda harus mengatur ini berdasarkan file<div class="container-fluid">
.offset
disetPosition
fungsi ...Ini di Google ("program cat kanvas html5"). Sepertinya yang Anda butuhkan.
http://dev.opera.com/articles/view/html5-canvas-painting/
sumber
periksa http://jsfiddle.net/ArtBIT/kneDX/ ini . Ini akan mengarahkan Anda ke arah yang benar
sumber
Saya juga ingin menggunakan metode ini untuk tanda tangan, saya menemukan contoh di http://codetheory.in/ .
Saya telah menambahkan kode di bawah ini ke jsfiddle
Html:
Javascript:
sumber
Ini adalah gambar kanvas kerja saya yang sangat sederhana dan hapus.
https://jsfiddle.net/richardcwc/d2gxjdva/
sumber
Alco periksa yang ini:
Contoh:
https://github.com/williammalone/Simple-HTML5-Drawing-App
Dokumentasi:
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
Dokumen ini mencakup kode-kode berikut: -
HTML:
JS:
Dan contoh mengagumkan lainnya
http://perfectionkills.com/exploring-canvas-drawing-techniques/
sumber
Saya harus memberikan contoh sederhana untuk subjek ini jadi saya akan membagikannya di sini:
http://jsfiddle.net/Haelle/v6tfp2e1
sumber
Sudah bertahun-tahun sejak pertanyaan itu diajukan dan dijawab.
Bagi siapa saja yang mencari kanvas gambar sederhana (misalnya, untuk mengambil tanda tangan dari pengguna / pelanggan), di sini saya memposting versi jquery yang lebih sederhana dari jawaban yang diterima saat ini
sumber
Beri tahu saya jika Anda kesulitan menerapkan ini. Ini menggunakan processing.js dan memiliki fitur untuk mengubah warna dan membuat titik gambar lebih besar dan lebih kecil.
sumber
init.js
?Versi super pendek, di sini , tanpa
position:absolute
di vanilla JavaScript. Ide utamanya adalah memindahkan konteks kanvas ke koordinat yang benar dan menggambar garis. Tanda komentarclick
handler dan komentarmousedown
&mousemove
penangan bawah untuk mendapatkan merasakan bagaimana itu bekerja.sumber
jika Anda memiliki gambar latar belakang untuk kanvas Anda, Anda harus membuat beberapa penyesuaian agar dapat berfungsi dengan baik karena trik menghapus putih akan menyembunyikan latar belakang.
berikut adalah inti dari kode tersebut.
sumber