Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mendapatkan Warna Piksel daripada Kanvas pada Mousemove?
Siaran ini meneroka cara anda boleh mendapatkan semula nilai RGB piksel di bawah kursor tetikus semasa bergerak di atas elemen kanvas. Kami akan menyediakan pendekatan komprehensif dengan contoh serba lengkap.
Untuk mencapai matlamat ini, mula-mula buat kanvas dengan dimensi yang dikehendaki:
<code class="html"><canvas id="example" width="200" height="60"></canvas></code>
Isi kanvas dengan elemen seperti segi empat sama:
<code class="js">const example = document.getElementById('example'); const ctx = example.getContext('2d'); ctx.fillStyle = randomColor(); ctx.fillRect(0, 0, 50, 50); ctx.fillStyle = randomColor(); ctx.fillRect(55, 0, 50, 50); ctx.fillStyle = randomColor(); ctx.fillRect(110, 0, 50, 50);</code>
Akhir sekali, tambah pengendali acara mousemove yang menangkap nilai piksel pada kedudukan kursor:
<code class="js">$('#example').mousemove(function(e) { // Calculate the position relative to the canvas const pos = findPos(this); const x = e.pageX - pos.x; const y = e.pageY - pos.y; const coord = `x=${x}, y=${y}`; // Get the pixel value const c = this.getContext('2d'); const p = c.getImageData(x, y, 1, 1).data; // Convert to hex format const hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); // Display the color information $('#status').html(coord + "<br>" + hex); });</code>
Kod ini bergantung pada fungsi sokongan untuk mencari kedudukan elemen dan menukar nilai RGB kepada heks. Takrifkan fungsi ini seperti berikut:
<code class="js">function findPos(obj) { let curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined; } function rgbToHex(r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); } function randomInt(max) { return Math.floor(Math.random() * max); } function randomColor() { return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`; }</code>
Lawati pautan berikut untuk melihat contoh penuh dalam tindakan:
https://bl.ocks.org /wayneburkett/ca41a5245a9f48766b7bc881448f9203
Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Warna Piksel daripada Kanvas pada Mousemove?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!