Chuyển màu xuyên tâm Canvas trong HTML
Phương thức createRadialGradient()
Phương thức createRadialGradient()
được sử dụng để xác định gradient hướng tâm/tròn.
Một gradient xuyên tâm được xác định bằng hai vòng tròn tưởng tượng: vòng tròn bắt đầu và vòng tròn kết thúc. Dải màu bắt đầu bằng vòng tròn bắt đầu và di chuyển về phía vòng tròn cuối.
Phương thức createRadialGradient()
có các tham số sau:
Parameter | Description |
---|---|
x0 | Required. The x-coordinate of the start circle |
y0 | Required. The y-coordinate of the start circle |
r0 | Required. The radius of the start circle |
x1 | Required. The x-coordinate of the end circle |
y1 | Required. The y-coordinate of the end circle |
r1 | Required. The radius of the end circle |
Đối tượng chuyển màu yêu cầu hai hoặc nhiều điểm dừng màu.
Phương thức addColorStop()
chỉ định các điểm dừng màu và vị trí của nó dọc theo dải màu. Các vị trí có thể nằm trong khoảng từ 0 đến 1.
Để sử dụng dải màu, hãy gán nó cho thuộc tính fillStyle
hoặc strokeStyle
, sau đó vẽ hình dạng (hình chữ nhật, hình tròn, hình dạng hoặc văn bản).
Ví dụ
Tạo một gradient xuyên tâm/hình tròn với hai điểm dừng màu; màu xanh lam nhạt cho vòng tròn bắt đầu của dải màu và màu xanh lam đậm cho vòng tròn kết thúc. Tâm của vòng tròn bắt đầu được đặt ở vị trí (150,75), có bán kính 15 px. Tâm của hình tròn cuối được đặt ở vị trí (150,75), có bán kính 150 px. Sau đó, tô màu hình chữ nhật bằng gradient:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
Hãy tự mình thử » Ví dụ
Ở đây, chúng tôi đặt bán kính của vòng tròn cuối thành một số nhỏ hơn (100) và chúng tôi thấy rằng độ dốc xuyên tâm/tròn sẽ nhỏ hơn:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
Hãy tự mình thử »Ví dụ
Ở đây chúng ta di chuyển điểm trung tâm của vòng tròn cuối để có giao diện mới:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,180,95,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
Hãy tự mình thử »Ví dụ
Ở đây chúng ta thêm một điểm dừng màu nữa vào gradient để có giao diện mới:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(0.3,"pink");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
Hãy tự mình thử »