Pertanyaan yang diberi tag «html5-canvas»

Setelah bereksperimen dengan operasi komposit dan menggambar gambar pada kanvas saya sekarang mencoba untuk menghapus gambar dan pengomposisian. Bagaimana saya melakukan ini? Saya perlu membersihkan kanvas untuk menggambar ulang gambar lain; ini bisa berlangsung sebentar jadi saya tidak berpikir menggambar persegi panjang baru setiap kali akan menjadi pilihan yang paling …

1013 javascript  html  canvas  html5-canvas  composite 

Apa pendekatan terbaik untuk membuat elemen dengan cepat dan mampu memindahkannya? Sebagai contoh, katakanlah saya ingin membuat persegi panjang, lingkaran, dan poligon, lalu pilih objek-objek itu dan pindahkan. Saya mengerti bahwa HTML5 menyediakan tiga elemen yang memungkinkan ini: svg , canvas dan div . Untuk apa yang ingin saya lakukan, …

476 javascript  html  svg  html5-canvas 

Bagaimana saya bisa secara otomatis skala <canvas>elemen HTML5 agar sesuai dengan halaman? Sebagai contoh, saya bisa mendapatkan <div>skala dengan mengatur heightdan widthproperti ke 100%, tetapi <canvas>skala tidak akan, bukan?

400 javascript  html  html5-canvas 

Saya sedang mengerjakan proyek seni generatif di mana saya ingin memungkinkan pengguna untuk menyimpan gambar yang dihasilkan dari suatu algoritma. Ide umumnya adalah: Buat gambar pada Kanvas HTML5 menggunakan algoritma generatif Ketika gambar selesai, izinkan pengguna untuk menyimpan kanvas sebagai file gambar ke server Izinkan pengguna mengunduh gambar atau menambahkannya …

261 javascript  php  ajax  html5-canvas 

Saya ingin memiliki halaman web yang memiliki satu kata terpusat. Saya ingin kata ini digambar dengan animasi, sehingga halaman "menulis" kata dengan cara yang sama seperti yang kita inginkan, yaitu mulai pada satu titik dan menggambar garis dan kurva dari waktu ke waktu sehingga hasil akhirnya adalah mesin terbang. Saya …

229 javascript  css  canvas  html5-canvas  css-shapes 

Saya menggunakan alat JavaScript "Canvas2Image" Nihilogic untuk mengonversi gambar kanvas ke gambar PNG. Yang saya butuhkan sekarang adalah untuk mengubah string base64 yang dihasilkan alat ini, menjadi file PNG aktual di server, menggunakan PHP. Singkatnya, apa yang saya lakukan saat ini adalah membuat file di sisi klien menggunakan Canvas2Image, kemudian …

212 php  javascript  base64  html5-canvas 

Saya ingin menyimpan kanvas saya ke img. Saya memiliki fungsi ini: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Ini memberi saya kesalahan: Uncaught SecurityError: Gagal mengeksekusi 'toDataURL' pada 'HTMLCanvasElement': Kanvas tercemar tidak boleh diekspor. Apa yang harus saya lakukan?

187 javascript  html5-canvas 

Foto kamera digital sering disimpan sebagai JPEG dengan tag "orientasi" EXIF. Untuk menampilkan dengan benar, gambar perlu diputar / dicerminkan tergantung pada orientasi mana yang diatur, tetapi browser mengabaikan informasi ini membuat gambar. Bahkan dalam aplikasi web komersial besar, dukungan untuk orientasi EXIF ​​bisa sangat sulit 1 . Sumber yang …

154 javascript  rotation  html5-canvas  exif 

Saya menggunakan elemen kanvas html5 untuk mengubah ukuran gambar di browser saya. Ternyata kualitasnya sangat rendah. Saya menemukan ini: Nonaktifkan Interpolasi saat Melakukan Penskalaan <kanvas> tetapi tidak membantu meningkatkan kualitas. Di bawah ini adalah kode css dan js saya serta gambar yang dipindai dengan Photoshop dan diskalakan di kanvas API. …

149 javascript  css  html  canvas  html5-canvas 

Untuk aplikasi menggambar, saya menyimpan koordinat gerakan mouse ke array kemudian menggambarnya dengan lineTo. Garis yang dihasilkan tidak mulus. Bagaimana saya bisa menghasilkan kurva tunggal antara semua poin yang dikumpulkan? Saya sudah googled tetapi saya hanya menemukan 3 fungsi untuk menggambar garis: Untuk 2 titik sampel, cukup gunakan lineTo. Untuk …

133 javascript  canvas  html5-canvas  bezier  spline 

Kode saya berfungsi dengan baik di localhost saya tetapi tidak berfungsi di situs. Saya mendapatkan kesalahan ini dari konsol, untuk baris ini .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. bagian dari kode saya: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX …

131 javascript  html  html5-canvas 

Saya ingin memutar foto berdasarkan rotasi aslinya, seperti yang diatur oleh kamera dalam data gambar JPEG EXIF. Triknya adalah semua ini harus terjadi di browser, menggunakan JavaScript dan <canvas>. Bagaimana JavaScript dapat mengakses JPEG, objek API file lokal, lokal <img>atau jarak jauh <img>, data EXIF ​​untuk membaca informasi rotasi? Jawaban …

125 javascript  jpeg  exif  html5-canvas 

Saya telah mencoba untuk mengubah apa yang tampaknya menjadi warna latar belakang default kanvas saya dari hitam menjadi transparan / warna lain - tetapi tidak berhasil. HTML saya: <canvas id="canvasColor"> CSS saya: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Seperti yang Anda lihat pada contoh online …

122 css  html  canvas  html5-canvas  three.js 

Apakah ada alasan, kecuali kinerja, untuk menggunakan WebGL dan bukan 2D-Canvas untuk game / aplikasi 2D ? Dengan kata lain, fungsi 2D apa yang ditawarkan oleh WebGL yang tidak mungkin dicapai dengan mudah dengan 2D-Canvas?

114 html  html5-canvas  webgl 

Saya mencoba untuk menumpuk dua kanvas bersama-sama dan menjadikannya kanvas lapisan ganda. Saya telah melihat contoh di sini: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> Tapi saya ingin mengatur …

104 css  html5-canvas