Apakah kecerunan yang terdapat dalam kanvas?

Kecerunan dalam kanvas termasuk kecerunan linear dan kecerunan jejari. Pengenalan terperinci: 1. Kecerunan linear mentakrifkan arah dan julat kecerunan melalui segmen garisan antara dua titik Anda boleh menggunakan kaedah "Canvas' createLinearGradient()" untuk mencipta objek kecerunan linear dan menggunakan kaedah "addColorStop()". untuk menetapkannya. Warna dan kedudukan kecerunan; 2. Kecerunan jejari mentakrifkan bentuk dan julat kecerunan melalui titik tengah dan jejari, dsb.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer Dell G3.

Dalam Kanvas, kita boleh menggunakan kecerunan untuk mencipta kesan grafik yang lebih kaya dan pelbagai. Kecerunan boleh digunakan pada isian dan pukulan untuk menambah peralihan warna pada elemen grafik. Terdapat dua jenis kecerunan utama dalam Kanvas: kecerunan linear dan kecerunan jejarian.

Kecerunan Linear:

Kecerunan Linear mentakrifkan arah dan julat kecerunan melalui segmen garisan antara dua titik. Kita boleh menggunakan kaedah createLinearGradient() Canvas untuk mencipta objek kecerunan linear dan menggunakan kaedah addColorStop() untuk menetapkan warna dan kedudukan kecerunan.

Sebagai contoh, kod berikut mencipta kecerunan linear dari sudut kiri atas ke sudut kanan bawah, dengan kecerunan warna dari merah ke biru:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建线性渐变对象
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
// 设置渐变颜色
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// 使用渐变作为填充
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Kecerunan Jejari (Kecerunan Jejari):

Sebuah kecerunan jejari berlalu melalui titik pusat dan Jejari yang mentakrifkan bentuk dan takat kecerunan. Kita boleh menggunakan kaedah createRadialGradient() Canvas untuk mencipta objek kecerunan jejari dan menggunakan kaedah addColorStop() untuk menetapkan warna dan kedudukan kecerunan.

Sebagai contoh, kod berikut mencipta kecerunan jejari daripada merah dalam kepada biru luar:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建径向渐变对象
var gradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width/2);
// 设置渐变颜色
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// 使用渐变作为填充
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Selain kecerunan linear dan jejari asas yang dinyatakan di atas, Kanvas juga menyokong bentuk kecerunan yang lebih kompleks, seperti tetapan kecerunan berulang dan ketelusan untuk warna berhenti. Ia boleh dilaraskan dan digabungkan mengikut keperluan khusus untuk mencipta kesan kecerunan yang lebih pelbagai.

Untuk meringkaskan, kecerunan linear dan kecerunan jejari boleh digunakan dalam Kanvas untuk menambah kesan peralihan warna pada elemen grafik. Kecerunan linear menggunakan segmen garisan antara dua titik untuk menentukan arah dan julat kecerunan, manakala kecerunan jejari menggunakan titik tengah dan jejari untuk menentukan bentuk dan julat kecerunan. Dengan menetapkan warna dan kedudukan yang berbeza, anda boleh mencipta kesan kecerunan yang kaya dan pelbagai, dengan itu meningkatkan daya tarikan visual grafik.

Atas ialah kandungan terperinci Apakah kecerunan yang terdapat dalam kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!