HTML Canvas Geçiş

Çizim - Yansımalar

Yansımalar, dikdörtgen, çember, çizgi, metin gibi şekilleri doldurabilir. Çizim üzerindeki şekiller saf renklerle sınırlı değildir.

İki farklı türde yansıma vardır:

  • createLinearGradient(x,y,x1,y1) - Düzeltilmiş yansıma oluşturma
  • createRadialGradient(x,y,r,x1,y1,r1) - Yansıma/çemberlik yansıma oluşturma

Yansıma nesnesi elde ettikten sonra, iki veya daha fazla renk etiketi eklemek zorundayız.

addColorStop() yöntemi, renk durak noktasını ve yansıma boyunca konumunu belirler. Yansıma konumu 0 ila 1 arasında herhangi bir konum olabilir.

Yansımayı kullanmak için, fillStyle veya strokeStyle özelliğini yansıma olarak ayarlayın ve şekilleri (dikdörtgen, metin veya çizgi) çizin.

Canvas - Yansımalar

createLinearGradient() kullanarak

Örnek

Düzeltilmiş yansıma oluşturun. Dikdörtgeni yansıma ile doldurun:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Kişisel olarak deneyin

createRadialGradient() kullanarak:

Örnek

Yansıma/çemberlik yansıma oluşturun. Dikdörtgeni yansıma ile doldurun:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Kişisel olarak deneyin

Ayrıca bakınız:

CodeW3C.com Tam Canvas İlgili Kılavuzu